Skip to main content

自定义属性

变量的声明​

自定义属性（有时候也被称作 CSS 变量或者级联变量）是由 CSS 作者定义的，它包含的值可以在整个文档中重复使用。由自定义属性标记设定值（比如： --main-color: black;），由 var() 函数来获取值（比如： color: var(--main-color);）

基本用法​

变量的声明​

声明一个自定义属性，属性名需要以两个减号（--）开始，属性值则可以是任何有效的 CSS 值。和其他属性一样，自定义属性也是写在规则集之内的，如下：

:root {
  --main-bg-color: brown;
}

注意，规则集所指定的选择器定义了自定义属性的可见作用域。通常的最佳实践是定义在根伪类 :root 下，这样就可以在 HTML 文档的任何地方访问到它了

自定义属性名是大小写敏感的，--my-color 和 --My-color 会被认为是两个不同的自定义属性。

变量的读取​

如前所述，使用一个局部变量时用 var() 函数包裹以表示一个合法的属性值：

element {
  background-color: var(--main-bg-color);
}

var() 还有个可选参数，表示默认值，即不存在该变量时使用该值

element {
  background-color: var(--main-bg-color, #000);
}

变量值的类型​

  1. 当变量值类型为字符串，可与其他字符串进行拼接
body::after{
    --text1 : 'hello '
    --text2 : var(--text1) 'world'
    content:var(--text2) '！' /*hello world !*/
}
  1. 当变量值是数值，不能与单位直接拼接，要使用 calc()函数连接
body {
  --width: 1200;
  width: calc(var(--width) * 1px);
}

参考​