初步使用
: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，会抛出语法错误。
大小写敏感
尽管--FOO与--foo都是合法的变量，但是当你引用前者指代的就是前者的值，后者亦然。
h1 {
--font-color: lightblue;
--Font-color: lightgreen;
color: var(--Font-color);
//lightgreen
}
设置值的注意事项
自定义属性可以以!important结尾, 但是CSS解析器会自动移除这个属性的值，并按瀑布流的形式确定其优先属性。换句话说，虽然可以使用!important,但是顶级优先“!”的禁止其它同类CSS生效的作用并没有实现CSS。
h1 {
--font-color: lightblue!important;
--Font-color: lightgreen;
color: var(--font-color);
color: var(--Font-color);
//lightgreen
}
继承性与优先级(可正常理解)
:root { --color: blue; }
div { --color: green; }
#alert { --color: red; }
* { color: var(--color); }
I inherited blue from the root element!
//blueWhile I got red set directly on me! //red
I’m red too, because of inheritance!
//red可与正常属性混用
:root {
--main-color: #c06;
--accent-background: linear-gradient(to top, var(--main-color), white);
}
互相调用无效
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)"这种没有空格的写法是错误的；
表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。
变量初始默认值
.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)无效
*/
}
变量的替换使用规范
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`的背景色是透明色
