必须了解的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;

• 以“--”双横杠开头，后面可以是数字[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设置的（权重最大）
</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>我是黄色的，由于没发现变量--color，因此取默认值</span>
<p>我是黑色，并不是绿色</p>

• var()第二个参数不需要双引号或单引号括起，括起无效（反正我的测试是这样的）。
  
• 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);