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

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

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

首先，來(lái)看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>

這段代碼包含一個(gè)段落和一個(gè)鏈接。接下來(lái)，我們?cè)O(shè)置實(shí)用程序類。我將在Color Hunt 上定義四種顏色，分別創(chuàng)建顏色屬性類和背景顏色屬性類，每個(gè)類都包含一個(gè)變量來(lái)賦值（分別為--c和--bg ）。例如，綠色顏色對(duì)應(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)來(lái)自動(dòng)創(chuàng)建顏色和背景類。這並非必需，只是自動(dòng)創(chuàng)建許多顏色相關(guān)實(shí)用程序類的一種方法。這非常有用，但要跟蹤使用情況，避免創(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)用實(shí)用程序類， --c變量將使用currentColor ， --bg也是如此！為了避免這種情況，我們定義一個(gè)頂級(jí)默認(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 自定義屬性好。

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

 /* 舊版瀏覽器的樣式*/
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 {
    /* 基本鏈接樣式*/
  }
}

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

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

接下來(lái)創(chuàng)建虛假下劃線。該圖像將是一個(gè)線性漸變，具有兩個(gè)相同的起點(diǎn)和終點(diǎn)：文本顏色--c 。我們確保它只水平重複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是用戶在鏈接處?kù)丁翱臻f”狀態(tài)時(shí)看到的。由於我們已經(jīng)設(shè)置好了一切，這是一個(gè)簡(jiǎn)短的規(guī)則集。雖然我們可以在--link-color的初始賦值中聲明--c變量，但我在這裡賦值是為了使我們樣式的每個(gè)步驟都清晰明了：

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

鏈接現(xiàn)在看起來(lái)很酷，但如果我們與它交互，什麼也不會(huì)發(fā)生……接下來(lái)創(chuàng)建這些樣式。需要發(fā)生兩件事：背景必須佔(zhàn)據(jù)所有可用高度（即100%），並且文本顏色必須更改為背景的顏色，因?yàn)楸尘笆俏谋绢伾钊死Щ螅瑢?duì)吧？）。第一個(gè)很簡(jiǎn)單： --bg-size: 100%; 。對(duì)於文本顏色，我們分配--bg變量，如下所示： --link-color: var(--bg); 。連同我們的偽類選擇器，我們最終得到：

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

看，懸?；蚓劢箷r(shí)下劃線變成了完整的背景！作為獎(jiǎng)勵(lì)，我們可以通過(guò)增加--shadow-size來(lái)添加點(diǎn)擊鏈接時(shí)的模擬邊框，我們的--space變量將再次派上用場(chǎng)：

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

我們現(xiàn)在差不多完成了！但是，它看起來(lái)有點(diǎn)過(guò)於通用，所以讓我們添加一個(gè)過(guò)渡、一些填充和圓角，並確保如果鏈接跨越多行，它看起來(lái)也很不錯(cuò)！

對(duì)於過(guò)渡，我們只需要?jiǎng)赢嬵伾?、背景大小?code>box-shadow 。持續(xù)時(shí)間由您決定，但鑑於鏈接通常約為20 像素高，我們可以設(shè)置一個(gè)較短的持續(xù)時(shí)間。最後，為了使它看起來(lái)更流暢，讓我們使用ease-in-out緩動(dòng)。這總結(jié)為：

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

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

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

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

完成後，我們應(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)元素不會(huì)影響垂直節(jié)奏，因此我們不需要指定每個(gè)方向*/

    /* 文本樣式*/
    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; /* 確保樣式在跨越多行的鏈接上重複*/

    /* 過(guò)渡聲明*/
    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);
  }

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

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

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

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