介绍

通常大型文档或者应用（甚至小规模的文档或应用）会包括大量的CSS。在这些CSS文件中通常会有大量相同的数据；例如，一个网站可能用了一个颜色主题并反复用三到四种颜色贯穿始终。改动这些数据会非常困难并且容易出错，因为它零散地分布在CSS文件（甚至多个文件）中，可能无法使用寻找替换实现。

于是CSS自定义变量属性应运而生，它允许用户使用特定语法定义相关变量，并在一定范围内反复使用var()引用，改动这些变量，引用这些变量的地方的CSS也将对应地发生变化。

亲测：ios9环境下没有效果，ios9不支持ES56，推测与此有关 2017-11-5注。

语法

定义自定义属性：--*

以--开头，后加变量名，具有继承性，适用于所有元素，计算属性，不适用于动画

Name:             --*Value:            
    
     Initial:          (nothing, see prose)Applies to:       all elementsInherited:        yesPercentages:      n/aMedia:            allComputed value:    specified value with variables substituted (but see prose for "invalid variables")Canonical order:   per grammarAnimatable:            no
    

使用举例

1. 初步使用

   :root {     --main-color: #06c;     --accent-color: #006;   }   /* The rest of the CSS file */   #foo h1 {     //引用变量     color: var(--main-color);   }

   以下使用方法错误！！！

   他错误地尝试使用变量名代替属性名：   .foo {     --side: margin-top;     var(--side): 20px;   } 这并不能实现`margin-top: 20px`，会抛出语法错误。

2. 大小写敏感

   尽管--FOO与--foo都是合法的变量，但是当你引用前者指代的就是前者的值，后者亦然。

   h1 {    --font-color: lightblue;    --Font-color: lightgreen;    color: var(--Font-color);    //lightgreen}

3. 设置值的注意事项

   自定义属性可以以!important结尾, 但是CSS解析器会自动移除这个属性的值，并按瀑布流的形式确定其优先属性。换句话说，虽然可以使用!important,但是顶级优先“!”的禁止其它同类CSS生效的作用并没有实现CSS。

   h1 {    --font-color: lightblue!important;    --Font-color: lightgreen;    color: var(--font-color);    color: var(--Font-color);    //lightgreen    }

4. 继承性与优先级(可正常理解)

   :root { --color: blue; }div { --color: green; }#alert { --color: red; }* { color: var(--color); }

I inherited blue from the root element!
 //blue
    
     I got green set directly on me!
    
        //green
    
       While I got red set directly on me!     //red  
     
I’m red too, because of inheritance!
  //red
    
```

1. 可与正常属性混用

   :root {  --main-color: #c06;  --accent-background: linear-gradient(to top, var(--main-color), white);}

2. 互相调用无效

   body {            font-size: 16px;        }        //h1最终大小为16px        h1 {            --font-color: lightblue!important;            --Font-color: lightgreen;            --one: calc(var(--two) + 30px);            --two: calc(var(--one) - 50px);            color: var(--font-color);            color: var(--Font-color);            font-size: var(--one);        }

   在不同范围内合法，事实上两者在不同范围内指代了不同的变量

         
          
           
          
            one   { --foo: 10px; }   //10   two   { --bar: calc(var(--foo) + 10px); } //20   three { --foo: calc(var(--bar) + 10px); } //30

   calc()使用通用的数学运算规则，但是也提供更智能的功能：

   • 使用“+”、“-”、“*” 和 “/”四则运算；

   • 可以使用百分比、px、em、rem等单位；

   • 可以混合使用各种单位进行计算；

   • 表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的；

   • 表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。

3. 变量初始默认值

   .component .header {     color: var(--header-color, blue);   }   .component .text {     color: var(--text-color, black);   }      /* In the larger application’s style: */   .component {     --text-color: #080;     /* header-color 为默认值blue     注： var(--header-color, blue， red)无效     */   }

4. 变量的替换使用规范

   var()并不是按照原文替换CSS字符

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

   这无法设置 margin-top: 20px;(a length),而是等同于 margin-top: 20 px; (a number followed by an ident空格),这是一个不合法的属性值. 不过, calc() 可以实现:

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

   下面的代码从语法上江是无错误的，但是并无实际效果。因为20px并不是一个背景色的有效值，如果没有其他设置(必须优先级高于这里的设置)或继承的背景色，将会使用全局默认的透明背景色。

   :root { --not-a-color: 20px; }       p { background-color: red; }       p { background-color: var(--not-a-color); }

//这里虽然有背景色的设置但是优先级并没有自定义属性的高，故而`p`的背景色是透明色

翻译参考：