css自定義屬性（css變量）

前言

剛開始的「css變量」，經擴展以後，稱爲「css自定義屬性」
當各類預處理器滿天飛的時候，css變量已經開始漸漸普及
在特定的應用場景，css變量確實發揮了很大的做用
下面開始學習css變量

正文

1、變量的聲明和使用

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

2、繼承和做用域

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的做用域內有效

3、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'

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

1. css變量：

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

2. 預處理器：

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

5、兼容

基本上能兼容大部分主流瀏覽器，直接使用沒有太大問題
若是想使用但又想兼容全部瀏覽器，就是用下面的方法檢測瀏覽器是否支持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');
}

6、經常使用場景

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

這裏是經常使用場景的demo：https://github.com/shinyshine...