CSS 的 currentColor 屬性非常實用，但遺憾的是，我們沒有類似的 currentBackgroundColor 屬性，而且 color-mod() 函數(shù)也尚未廣泛支持。

因此，許多開發(fā)者希望根據(jù)上下文樣式化鏈接，并在懸?；蚓劢箷r反轉(zhuǎn)顏色。借助 CSS 自定義屬性和一些簡單的實用程序類，我們可以利用樣式的層疊特性實現(xiàn)強(qiáng)大的效果。

為此，我們需要使用實用程序類（包含自定義屬性）來指定文本和背景顏色，然后用這些類定義下劃線的顏色，并在懸停時擴(kuò)展為完整的背景。

首先，來看 HTML 結(jié)構(gòu)：

<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, <a href="http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">sed do eiusmod tempor incididunt</a> ut labore et dolore magna aliqua. Aliquam sem fringilla ut morbi tincidunt. Maecenas accumsan lacus vel facilisis. Posuere sollicitudin aliquam ultrices sagittis orci a scelerisque purus semper.
  </p>

這段代碼包含一個段落和一個鏈接。接下來，我們設(shè)置實用程序類。我將在 Color Hunt 上定義四種顏色，分別創(chuàng)建顏色屬性類和背景顏色屬性類，每個類都包含一個變量來賦值（分別為 --c 和 --bg）。例如，綠色顏色對應(yīng)的類如下：

.u-color--green {
  --c: http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b08ffc8;
  color: http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b08ffc8;
}

.u-bg--green {
  --bg: http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b08ffc8;
  background-color: http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b08ffc8;
}

Sass 用戶可以使用映射和循環(huán)來自動創(chuàng)建顏色和背景類。這并非必需，只是自動創(chuàng)建許多顏色相關(guān)實用程序類的一種方法。這非常有用，但要跟蹤使用情況，避免創(chuàng)建未使用的類。以下是生成這些類的 Sass 代碼：

$colors: ( // 定義顏色列表
  'green': http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b08ffc8,
  'light': http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bfff7f7,
  'grey': http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bdadada,
  'dark': http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b204969
);

@each $n, $c in $colors { // $n 為鍵，$c 為值
  .u-color--http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b{$n} {
    --c: http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b{$c};
    color: http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b{$c};
  }

  .u-bg--http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b{$n} {
    --bg: http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b{$c};
    background-color: http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b{$c};
  }
}

如果忘記在 HTML 中應(yīng)用實用程序類，--c 變量將使用 currentColor，--bg 也是如此！為了避免這種情況，我們定義一個頂級默認(rèn)值：

html {
  --c: http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000000;
  --bg: http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bffffff;
}

現(xiàn)在，只需要樣式化鏈接即可。本文中我們將樣式化所有 <a></a> 元素，但也可以輕松添加例如 .fancy-link 這樣的類。

鏈接的樣式應(yīng)遵循 “LoVe-HAte” 順序：:link、:visited、:hover（和 :focus?。┮约?:active。我們可以使用 :any-link，但瀏覽器支持度不如 CSS 自定義屬性好。

我們可以先聲明鏈接樣式，為舊版瀏覽器提供可接受的體驗，然后檢查自定義屬性支持：

/* 舊版瀏覽器的樣式 */
a {
  color: inherit;
  text-decoration: underline;
}

a:hover,
a:focus,
a:active {
  text-decoration: none;
  outline: .0625em solid currentColor;
  outline-offset: .0625em;
}

a:active {
  outline-width: .125em;
}

@supports (--a: b) { /* 檢查 CSS 變量支持 */
  /* 默認(rèn)變量值 */
  html {
    --c: http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000000;
    --bg: http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bffffff;
  }

  a {
    /* 基本鏈接樣式 */
  }
}

接下來創(chuàng)建基本鏈接樣式。我們將使用自定義屬性使樣式盡可能 DRY。

首先，我們需要設(shè)置變量。我們想要定義一個 --space 變量，用于各種屬性，在文本周圍添加一些空間。鏈接顏色也將在 --link-color 變量中定義，默認(rèn)為 currentColor。虛假下劃線將使用背景圖像生成，其大小將根據(jù)狀態(tài)使用 --bg-size 變量調(diào)整，默認(rèn)為 --space 值。最后，為了增加趣味性，我們還將在鏈接處于 :active 狀態(tài)時模擬一個邊框，因此我們將在 --shadow-size 中定義其大小，在非活動狀態(tài)下設(shè)置為 0。這給了我們：

--space: .125em;
--link-color: currentColor;
--bg-size: var(--space);
--shadow-size: 0;

首先，我們需要調(diào)整回退樣式。我們將設(shè)置顏色以使用自定義屬性，并刪除默認(rèn)的下劃線：

color: var(--link-color);
text-decoration: none;

接下來創(chuàng)建虛假下劃線。該圖像將是一個線性漸變，具有兩個相同的起點和終點：文本顏色 --c。我們確保它只水平重復(fù) background-repeat: repeat-x;，并將其放置在元素底部 background-position: 0 100%;。最后，我們給出它的尺寸，水平為 100%，垂直為 --bg-size 值。最終得到：

background-image: linear-gradient(var(--c, currentColor), var(--c, currentColor));
background-repeat: repeat-x;
background-position: 0 100%;
background-size: 100% var(--bg-size);

為了 :active 狀態(tài)，我們還定義了 box-shadow，它將不存在，但使用我們的變量，它將能夠生效：box-shadow: 0 0 0 var(--shadow-size, 0) var(--c);

這是基本樣式的大部分內(nèi)容?，F(xiàn)在，我們需要根據(jù)鏈接狀態(tài)為變量分配新值。

:link 和 :visited 是用戶在鏈接處于“空閑”狀態(tài)時看到的。由于我們已經(jīng)設(shè)置好了一切，這是一個簡短的規(guī)則集。雖然我們可以在 --link-color 的初始賦值中聲明 --c 變量，但我在這里賦值是為了使我們樣式的每個步驟都清晰明了：

a:link,
a:visited {
  --link-color: var(--c);
}

鏈接現(xiàn)在看起來很酷，但如果我們與它交互，什么也不會發(fā)生……接下來創(chuàng)建這些樣式。需要發(fā)生兩件事：背景必須占據(jù)所有可用高度（即 100%），并且文本顏色必須更改為背景的顏色，因為背景是文本顏色（令人困惑，對吧？）。第一個很簡單：--bg-size: 100%;。對于文本顏色，我們分配 --bg 變量，如下所示：--link-color: var(--bg);。連同我們的偽類選擇器，我們最終得到：

a:hover,
a:focus,
a:active {
    --bg-size: 100%;
    --link-color: var(--bg);
}

看，懸?；蚓劢箷r下劃線變成了完整的背景！作為獎勵，我們可以通過增加 --shadow-size 來添加點擊鏈接時的模擬邊框，我們的 --space 變量將再次派上用場：

a:active {
  --shadow-size: var(--space);
}

我們現(xiàn)在差不多完成了！但是，它看起來有點過于通用，所以讓我們添加一個過渡、一些填充和圓角，并確保如果鏈接跨越多行，它看起來也很不錯！

對于過渡，我們只需要動畫顏色、背景大小和 box-shadow。持續(xù)時間由您決定，但鑒于鏈接通常約為 20 像素高，我們可以設(shè)置一個較短的持續(xù)時間。最后，為了使它看起來更流暢，讓我們使用 ease-in-out 緩動。這總結(jié)為：

transition-property: color, background-size, box-shadow;
transition-duration: 150ms;
transition-timing-function: ease-in-out;
will-change: color, background-size, box-shadow; /* 讓瀏覽器知道哪些屬性即將被操作。 */

接下來，我們將 --space 變量分配給 padding 和 border-radius，但不要擔(dān)心前者——因為我們沒有將其定義為內(nèi)聯(lián)塊，所以 padding 不會弄亂文本塊的垂直節(jié)奏。（只需確保測試您的值）

padding: var(--space);
border-radius: var(--space);

最后，為了確保樣式在多行上正確應(yīng)用，我們只需要添加 box-decoration-break: clone;（以及前綴，如果您愿意），就是這樣。

完成后，我們應(yīng)該有這些樣式：

/* 舊版瀏覽器的樣式 */
a {
  color: inherit;
  text-decoration: underline;
}

a:hover,
a:focus,
a:active {
  text-decoration: none;
  outline: .0625em solid currentColor;
  outline-offset: .0625em;
}

a:active {
  outline-width: .125em;
}

/* 現(xiàn)代瀏覽器的基本鏈接樣式 */
@supports (--a: b) {
  /* 默認(rèn)變量值 */
  html {
    --c: http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000000;
    --bg: http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bffffff;
  }

  a {
    /* 變量 */
    --space: .125em;
    --link-color: currentColor;
    --bg-size: var(--space);
    --shadow-size: 0;

    /* 布局 */
    padding: var(--space); /* 內(nèi)聯(lián)元素不會影響垂直節(jié)奏，因此我們不需要指定每個方向 */

    /* 文本樣式 */
    color: var(--link-color); /* 使用變量設(shè)置顏色 */
    text-decoration: none; /* 刪除默認(rèn)下劃線 */

    /* 盒子樣式 */
    border-radius: var(--space); /* 使其更漂亮 ? */
    background-image: linear-gradient(var(--c, currentColor), var(--c, currentColor));
    background-repeat: repeat-x;
    background-position: 0 100%;
    background-size: 100% var(--bg-size);
    box-shadow: 0 0 0 var(--shadow-size, 0) var(--c, currentColor); /* 在 :active 狀態(tài)下使用 */
    box-decoration-break: clone; /* 確保樣式在跨越多行的鏈接上重復(fù) */

    /* 過渡聲明 */
    transition-property: color, background-size, box-shadow;
    transition-duration: 150ms;
    transition-timing-function: ease-in-out;
    will-change: color, background-size, box-shadow;
  }

  /* 空閑狀態(tài) */
  a:link,
  a:visited {
    --link-color: var(--c, currentColor); /* 使用 --c，或回退到 currentColor */
  }

  /* 交互狀態(tài) */
  a:hover,
  a:focus,
  a:active {
    --bg-size: 100%;
    --link-color: var(--bg);
  }

  /* 活動狀態(tài) */
  a:active {
    --shadow-size: var(--space); /* 定義 box-shadow 大小 */
  }
}

當(dāng)然，它比只使用下劃線要復(fù)雜一些，但與允許您始終訪問文本和背景顏色的實用程序類結(jié)合使用，它是一個相當(dāng)不錯的漸進(jìn)式增強(qiáng)。

您可以使用三個變量來增強(qiáng)此功能，每個顏色使用 rgb 或 hsl 格式來調(diào)整不透明度等。您還可以添加文本陰影來模擬 text-decoration-skip-ink！

以上是具有自定義屬性的顏色的上下文實用課程的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！