CSS原生變量

1.聲明

聲明變量的時候，變量名前面要加兩根連詞線 --，聲明的命名不能包含$、[、^、(、%等字符，普通字符侷限於[0~9]、[a~z]、[A~Z]、下劃線_和短橫線-這些組合，可是能夠是中文，日文或者韓文。例如：

:root{
  --color1: #ccc;
  --寬度: 100px;
}

變量的值能夠爲各式各樣的值，包括字符串。如：

:root{
    --text: 'Today is sunday.'
}
p:before{
    content: var(--text);
}

2.使用

變量的使用要用到var()函數來讀取。
例如：

:root{
  --color1: #ccc;
  --寬度: 100px;
  --text1: 'Today is sunday.'
}
.test{
    width: var(--寬度);
    color: var(--color1);
    &:before{
      content: var(--text1);
    }
 }

線上效果：https://codepen.io/jianxiujiucan/pen/YzXXejL

若是變量值是數值，不能與數值單位直接連用，只能配合calc()函數使用。例如：

.test{
  --num: 100;
  width: var(--num)px; //無效
  width: calc(var(--num) * 1px); // 有效，等同於100px
}

聲明過的變量也能夠被新變量引用，例如：

:root{
  --color1: #ccc;
  --color2: var(--color1);
}

3.做用域

CSS變量的做用域與 CSS 的"層疊"（cascade）規則一致，全局聲明，也能夠局部聲明。聲明的變量能夠被從新定義，按優先級來顯示。這一點是預處理器的變量所達不到的。例如：

:root {
  --color1: #ccc;
  --color2: var(--color1);
}
.test {
    --color1: red;
}
.box .test {
   --color1: green;
}

效果以下：
https://codepen.io/jianxiujiucan/pen/ZEGbOVa

var()函數還能夠使用第二個參數，表示變量的默認值。若是該變量不存在，就會使用這個默認值。例如：

color: var(--color3, #999); //若是--color3未定義，則使用顏色"#999"

4.原生變量與SASS的衝突

當原生變量的值定義爲rgb()函數的值，在頁面中調用它，那麼Sass編譯會報錯。例如：

:root {
  --color: 255,90,100;
}
p {
  color: rgb(var(--color));
}

以上代碼在原生的CSS裏是沒問題的，能正確讀取到顏色值。
可是若是是在SCSS裏，編譯則會報錯：
wrong number of arguments (1 for 3) for 'rgb'
由於SCSS本身封裝了rgb函數，函數接收的值的格式必須是xxx,xxx,xxx，因此報錯了。
可是，若是用rgba()函數，卻又能夠編譯，例如：

:root {
  --color: 255,90,100;
}
p {
  color: rgba(var(--color), 1);
}

注：上述代碼在codepen的sass模式下也沒法生效，用vs code的插件live sass能夠編譯經過。

5.JS修改變量

sass的變量通過編譯以後用js是沒有辦法修改的，而css原生變量卻能夠經過js從新賦值，這一點絕對是大大的優點啊。例如：

document.body.style.setProperty('--color1, red'); // 設置變量
document.body.style.getPropertyValue('--color1').trim();  // 讀取變量
document.body.style.removeProperty('--color1'); // 刪除變量

6. 實例：應用變量實現換膚功能

https://jianxiujiucan.github.io/demo/skin.html