CSS笔记-自定义属性

自定义属性（css变量或者级联变量）所包含的值在整个文档中可以重复使用。

使用场景：当css代码中有许多重复的值（替换非常的麻烦）

基础用法

声明

声明一个自定义属性，属性名需要以两个减号（--）开始，属性值则可以是任何有效的 CSS 值。

• 大小写敏感
• 写在规则集之内的，规定其可见作用域
• 最佳实践：将自定义属性放在根伪类 :root 中，任何地方都可以访问

:root {
     --main-bg-color: #C9B089;
}

使用

使用自定义属性的时候，用一个局部变量时用 var() 函数包裹以表示一个合法的属性值。

• 当遇到无效的属性的时候，会使用继承值或初始值代替
• 可以定义多个备用值(fallback value)，当给定值未定义时将会用备用值替换
• 在JS中获取或者修改CSS变量和操作普通CSS属性一致

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

 /* Red if --my-var is not defined */
.item {
  color: var(--item-color, red); 
}