1.4 KiB
1.4 KiB
title | localeTitle |
---|---|
Cascading CSS Variables | 级联CSS变量 |
级联CSS变量
正式称为自定义属性的级联CSS变量是与传统变量类似的实体。因为变量允许存储和更新数据以便以后反映新值2 。
CSS变量定义为包含特定值,并在整个文档中重用。它们使用自定义属性表示法(例如, color: var(--main-color)
--main-color: black
)设置,并使用var()
函数(例如, color: var(--main-color)
) 1进行访问 。在:root
或body
选择器中声明CSS变量以进行全局访问。
在维护复杂的CSS文档时,不仅有利于使用CSS变量,还有智能。在进行未来更新而不是搜索潜在的数百行代码时,只需要更新必要的CSS变量1 。
句法
:root {
--main-bkgnd-color: #00B8CB;
}
body {
background-color: var(--main-bkgnd-color);
font-family: 'Raleway', Helvetica, sans-serif;
}
声明变量:
--custom-name: value
使用变量: css var(--custom-name)