必須了解的CSS變量（var）

@blue{
  color: blue;
}

.box{
  color: @blue;
}

:root{
  color: red;
}
div{
  color: currentColor;
}
div.blue{
  color: blue;
}

<div class="blue">字體是藍色的</div>
<div>字體是紅色的</div>

--variableName: variableValue;

• 以“--”雙橫杠開頭，后面可以是數(shù)字[0-9]、字母[a-zA-Z]、下劃線_和短橫線-這些組合，甚至是中文也行，但不能包含$、[、^、(、%等字符。
  
• 大小寫是敏感的
• 定義只能在聲明塊{}里面

:root{
  --1: red; /*有效的*/
  --background-color: blue; /*有效的*/
  --font_size: 20px; /*有效的*/
  --寬度: 100px; /*有效的*/
  --$color: red; /*無效的*/
}
--color: red; /*無效的*/

div{
  --1: purple;
}

:root{ --color: green;}
.box{ --color: yellow;}
#box{ --color: orange;}
 *{ color: var(--color);}

<span>我是綠色，繼承根元素</span>
<div class="box">我是黃色，通過類設置的</div>
<div id="box">
  我是橙色，通過ID設置的（權(quán)重最大）
</div>

cssPropertyName: var(--variableName [, declarationValue]);

:root{
  --color-name: 20px;
}
div{
  --color: red;
  color: var(--color);
}
span{
  color: var(--color, yellow);
}
p{
  color: var(--color-name, green);
}

<div>我是紅色，自己設置的</div>
<span>我是黃色的，由于沒發(fā)現(xiàn)變量--color，因此取默認值</span>
<p>我是黑色，并不是綠色</p>

• var()第二個參數(shù)不需要雙引號或單引號括起，括起無效（反正我的測試是這樣的）。
  
• var()的默認值起作用僅限于變量未定義，像上面例子中，--color-name等于20px，然后賦給color只會失效，而不會取默認值

div{
  --width: 20px;
  width: calc(100% - var(--width));
}

:root{
  --red: red;
  --color: var(--red);
}
div{
  color: var(--color);
}
<div>我是紅色的</div>

• CSS自定義屬性變量是不能用作CSS屬性名稱的，比如：var(--color): red;
• 不能用作背景地址，比如：url(var(--url))；
• 由于var()后面會默認跟隨一個空格，因此在其后面加單位是無效的，比如：--size:20; font-size: var(--size)px會解析成font-size: 20 px;

• 使用@supports方法

@supports ( (--size: 0)) {
  /* 支持 */
}
@supports ( not (--size: 0)) {
 /* 不支持 */
}

• 使用JavaScript

if(window.CSS && window.CSS.supports && window.CSS.supports('--size', 0)) {
  /* 支持 */
}else{
  /* 不支持 */
}

var rootStyles = getComputedStyle(document.documentElement);
var value = rootStyles.getPropertyValue('--variableName');

// 獲取某個元素中定義的屬性變量
value = element.style.getPropertyValue('--variableName');

element.style.setProperty('--variableName', value);
document.documentElement.style.setProperty('--variableName', value);

實例：

div{
  color: var(--color);
}

<div>我是紅色的，由JavaScript設置</div>

<script>
  document.documentElement.style.setProperty('--color', 'red');
</script>

相信通過這篇文章，你會對CSS自定義屬性變量有一定的了解，當然，個人能力有限，如果你有更多的關于CSS var()的文章或看法，歡迎在下方評論告知。

參考文章：

• CSS Variables in WebKit
  
• CSS Custom Properties