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);
}
- color声明一个默认值gray,变量–main-color没有被声明&#x