教學 CSS變數

[a7m5001]

CSS預設有140種標準顏色名稱，當你用以下兩種方式更改字體顏色會得到相同的效果。

body{
    color:red;
}

body{
   color:#f00;
}

雖然記住英文單詞確實要比記住色彩的RGB值或HEX值要輕鬆得多，但對於沒學過色彩專業的人，
這些標準顏色名稱應該並不會有太多幫助，那麼我們是不是可以自定義色彩名稱呢?

如果我們需要為CSS建立變數，和程式語言的變數相同，我們可以建立全域變數和區域變數，
並使用JavaScript變更CSS變數的值，讓改動整份網頁的顏色變得相當簡易。

以下我將以全域變數為例：

:root{
    --blue:#00f;
}

CSS變數名稱需要以兩個減號為開頭，並在:root下宣告，而當我們要使用這個變數時，則以var()來調用變數。

body{
    background-color:var(--blue);
}

這麼做的好處很明顯，當有大量使用某一設定的元素要進行變更時，
只須對變數的值做更改，那麼最多只要更改一次，如果以傳統的方式(RGB或HEX)，
那麼每次做變動都必須耗盡心力。
而變數名稱可以自由定義，不一定得要是顏色的名稱，
甚至可以使用MainColor和SecondaryColor等等這種用來描述其意圖的名稱，
如此程式設計師便可完全將此部分交由相關職位的設計師去做處裡。

 

[a7m5001]

在此附上140種顏色及名稱全覽圖：

如有變動請以W3C官方網站為主。