【CSS黑科技1】使用CSS的currentColor變量寫DRY代碼

| 導語 若是你已是sass或者less的用戶，你確定已經在你的樣式表中用過變量了，也知道有變量的存在，會很是靈活好用，若是你沒用過，那必定很想在普通的css中有變量的存在，那麼咱們就來認識一下這個特殊的變量吧： currentColor

 

變量的好處

css中，若是有變量的使用，會讓咱們的代碼能DRY（don't repeat youself ：特指在程序設計以及計算中避免重複代碼，由於這樣會下降靈活性、簡潔性，而且可能致使代碼之間的矛盾），特別是在咱們管理維護大型項目的時候很是好用，由於這每每是包含了大量的重複值。

變量經常使用的用例之一是顏色主題。好比說，在項目中，配色方案一般要重複使用一些顏色值，若是方案對這些值改變，咱們最但願的是，只是在變量中修改這些值，整個配色方案生成結果也跟着改變。

 

  

currentColor

這個currentColor關鍵字就像是css變量，咱們來看看他的官方定義：

 

也就是說：currentColor是 color 屬性的值，具體意思是指：currentColor關鍵字的使用值是 color 屬性值的計算值。

• 若是currentColor關鍵字被應用在 color 屬性自身，則至關因而 color: inherit。
• 上述這些話都是什麼意思呢？先看個例子

• 若是你能立馬知道上述代碼的運行結果，那麼就差很少理解 currentColor 關鍵字的意思了。
• 上述代碼將會讓div擁有一個紅色的邊框，這就解釋了 border-color 屬性的默認值是 color 屬性的值；
• 若是將上述代碼中的color屬性定義刪除，那麼邊框的顏色將取決於父元素的 color 計算值，由於 color 擁有繼承性；

舉個栗子

咱們用栗子來進一步說明這個神奇的currentColor吧

 

這是一個svg圖標+說明文字的按鈕，也就是說若是咱們給按鈕的各個狀態（:hover , :focus , :active）設定不一樣的樣式，會有相似下方的代碼：

 

假如，恩，是的 假若有一天，設計師（maybe產品？）同窗改顏色方案了，網站不是藍色調了，換成了灰色調了

咱們只好苦逼的再換一次顏色唄，只是換文字的顏色還不行，還得把裏面svg的也換一遍

假如咱們用了currentColor，svg的顏色以及邊框顏色 都會使用color的值

 

 

主要意義——級聯

對，就是這麼神奇，當一個元素有一個color值，不管它是顯式設置仍是繼承的，該元素的某些可以接受<color>值（如border-color、background-color 、fill 等等）的前景元素使用currentColor將會默認繼承該color值

元素中將會獲得/繼承元素color值的包括：

• 元素的文本內容——正是color屬性使用的地方
• 文本的輪廓
• 元素的邊框
• 元素的盒陰影
• img的alt文本。也就是，當沒法顯示圖像時，代替圖像出現的文本，會繼承這個顏色值。
• 列表項的小黑點和邊框
• 一些瀏覽器（好比Chrome）水平線（<hr>）的邊框顏色。（沒有邊框的話，顏色就不會受影響）

若是你沒有在某個元素的這些屬性中顯式地給它們設置顏色，它們就會默認繼承元素的color計算值。

咱們理解一下上面這段話，currentColor這個屬性的主要意義是顏色級聯，它能在各類地方派上用場。咱們經過currentColor這個屬性，讓各個相關的地方的顏色關聯起來，咱們最後再經過2個栗子來理解一下吧

一、以下面這個GIF圖像所示。Simon使用了瀏覽器中的開發工具以及顏色拾取器來改變color屬性的值，而後獲得了一個實時的組件顏色改變的預覽。

地址：http://simurai.com/blog/2014/05/04/cssconf/ 是的 currentColor這個黑科技我就是在cssconf上看到他的

 

 

 

二、下面這個是由Scott Kellum建立的示例，他進一步理解了這個概念，併爲color屬性添加了一個動畫效果。在color屬性值改變時，全部受到該color影響的元素都會隨之改變他們的顏色。查看一下Scott Kellum (@scottkellum)在CodePen上建立的示例

地址：http://codepen.io/scottkellum/pen/Fhxql/

 

 

結語

感謝閱讀，若是你有別的黑科技，跪求分享~