1、声明变量的时候,变量名前面要加两根连词线(–)。
body {
--foo: #7F583F;
--bar: #F7EFD2;
}
2、var()用于读取变量
a {
color: var(--foo);
color: var(--foo, #7F583F);//变量不存在就是用后面那个默认值
text-decoration-color: var(--bar);
}
3、变量值是一个字符串,可以与其他字符串拼接。
--bar: 'hello';
--foo: var(--bar)' world';
4、如果变量值是数值,不能与数值单位直接连用。必须使用calc()函数
.foo {
--gap: 20;
margin-top: calc(var(--gap) * 1px);
}
5、如果变量值带有单位,就不能写成字符串。
/* 无效 */
.foo {
--foo: '20px';
font-size: var(--foo);
}
/* 有效 */
.foo {
--foo: 20px;
font-size: var(--foo);
}
6、全局的变量通常放在根元素:root里面,确保任何选择器都可以读取它们。
:root {
--main-color: #06c;
}