[CSS]CSS自定义属性

CSS自定义属性

Custom Properties for Cascading Variables（用作层叠式变量的自定义属性）的CSS规范将“变量”的概念引入了CSS。你可以声明一个变量，再给它赋值，然后可以在样式表的任何地方引用它。可以通过这种方式，减少样式表中的重复代码。

定义

:root {
    --main-font : STKaiti;
    --font-size-base: 8px; 
}

自定义属性命名以两道横杠--为前缀，一定要声明在一个声明区块里，这里在:root选择器内声明。之后这个变量可以在整个页面的样式里使用。

使用

.refer {
    font-family: var(--main-font);
}

对一段文字使用用变量声明的字体STKaiti：

一次声明，在样式表的任意一个地方引用。如果需要修改它的值，只需要在一行代码中编辑它的值就可以。

支持第二个参数

var()函数支持第二个参数，代表一个默认值。假如一个变量被声明时，第一个参数没有被声明，第二个参数值就会被引用。

.refer {
    font-family: var(--main-font);
    color: var(--main-color, gray);
    font-weight: var(--brand-color);
}

1. color声明一个默认值gray，变量–main-color没有被声明，于是默认值就会被使用。
2. 如果var()被定义为一个