css自定義屬性（css變量）

感謝原文作者：Kuku殿下
原文鏈接：https://segmentfault.com/a/1190000015948538

前言

剛開始的“css變量”，經擴展之后，稱為“css自定義屬性”
當各種預處理器滿天飛的時候，css變量已經開始漸漸普及
在特定的應用場景，css變量確實發揮了很大的作用
下面開始學習css變量。

正文

一、變量的聲明和使用

CSS選擇器不能是數字開頭，JS中的變量是不能直接數值的，但是，在CSS變量中，這些限制通通沒有。 但不能包含$，[，^，(，%等字符，普通字符局限在只要是“數字[0-9]”“字母[a-zA-Z]”“下划線_”和“短橫線-”這些組合，但是可以是中文，日文或者韓文。

1. 聲明：大小寫敏感, --variable-name: variable-value;

:root{
    --color: red;
}

2. 使用：使用var(變量名)來使用一個變量

#div {
    color: var(color)
}

3. 變量組合使用

使用變量的時候，通常不會單獨使用，可以組合使用
當變量的值是字符串時，可以直接拼接，如下

:root{
  --screen-category: 'category'  //變量值是字符串
}
body:after {
  content: '--screen-category: 'var(--screen-category);  // 直接拼接
}

當變量的值是數值時，必須使用calc()函數計算，就算還是簡單的單位拼接

.foo {
  --gap: 20;
  /* 無效 */
  margin-top: var(--gap)px;
}

.foo {
  --gap: 20;
  margin-top: calc(var(--gap) * 1px);
}

4. 變量未定義和錯誤定義

如果我們使用的變量沒有定義，則使用后面的值作為元素的屬性值, 如下所示
body里面訪問不到.box定義的–1，因此使用#cd0000。

即，設置一個默認值。

.box {
  --1: #369; 
}
body {
  background-color: var(--1, #cd0000);
}

使用變量時，若變量已定義，但是變量的值不正確，則使用缺省值，如:

body {
  --color: 20px;
  background-color: #369;
  background-color: var(--color, #cd0000);
}

結果body的顏色是transparent，因為background-color的缺省值就是transparent。

二、繼承和作用域

1. 作用域

使用:root{}來定義全局css變量
想讓變量在局部可用，就定義在某個特定的選擇器下

還是下面這段代碼

:root{
  color: red; //全局可用
}
.box {
  --1: #369;  //只在.box這個作用域可用 
}
body {
  background-color: var(--1, #cd0000);
}

2. 繼承

<div class="wrapper"> <div class="content1"></div> <div class="content2"></div> </div> .wrapper {
   --color: red;
}

.content1 {
   --color: yellow;
}

content1的--color為yellow
content2的--color沒有定義，繼承了wrapper的--color為red
--color: yellow只在content1的作用域內有效。

三、js操作css變量

:root {
   --color: red;
}

//讀取
var root = getComputedStyle(document.documentElement);
var color = root.getPropertyValue('--color').trim();
console.log(color); // '70px'

//改變
document.documentElement.style.setProperty('--color', 'yellow');
var color = root.getPropertyValue('--color').trim();
console.log(color);  // '100px'

//刪除
document.documentElement.style.removeProperty('--color');
var color = root.getPropertyValue('--color').trim();
console.log(color); // '70px'

四、與預處理器(sass,less)比較

1. css變量：

動態性，可以在運行時更改
可以方便地從js讀寫
可繼承，可組合，有作用域

2. 預處理器：

預處理器的變量不是動態的，在運行時不可更改
預處理器的變量沒有作用域的說法
不能與js交互

五、兼容

基本上能兼容大部分主流瀏覽器，直接使用沒有太大問題
如果想使用但又想兼容所有瀏覽器，就是用下面的方法檢測瀏覽器是否支持CSS自定義屬性的方法

/*css*/
@supports ( (--a: 0)) {
    /* supported */
}

@supports ( not (--a: 0)) {
    /* not supported */
}

// Js if (window.CSS && window.CSS.supports && window.CSS.supports('--a', 0)) {
    alert('CSS properties are supported');
} else {
    alert('CSS properties are NOT supported');
}

六、常用場景

1. 為風格統一而使用顏色變量
2. 一致的組件屬性（布局，定位等）
3. 避免代碼冗余(響應式布局，制動動畫)

這里是常用場景的demo：https://github.com/shinyshine/css-ani-variable