概念

css自定义属性又叫css变量，或级联变量（cascading variables).
特征：带有前缀--的属性名

解决的问题

• 相同的css属性值被重复用于多个地方，导致一旦该值需要修改，就需要同时改多个地方, 缺少复用性。
  例如：下面的代码，会将 background-color 的属性值 brown重复使用在了多处，一旦需要修改该颜色值，则多处都需要修改。

  .one {
    color: black;
    background-color: brown;
  }
  
  .two {
    color: white;
    background-color: brown;
  }
  

• 使用css自定义属性，能够让css属性值变得见名知意

定义和调用方式

如何定义自定义属性

• 自定义属性名称的要求：
  以两个短横线开头，例如：--main-bg-color
• 自定义属性的定义语句放置的位置：
  通常的最佳实践是定义在根伪类 :root 下，这样就可以在HTML文档的任何地方访问到它了。也可以不遵循该最佳实践，而定义在特定的css选择器下。

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

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

如何调用自定义属性

在css代码中调用css自定义属性

常规属性名：var(自定义属性名)；，例如：

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

在js代码中调用css自定义属性

和调用常规css属性的方式相同。例如：

// 获取一个 Dom 节点上的 CSS 变量
element.style.getPropertyValue("--my-var");

// 获取任意 Dom 节点上的 CSS 变量
getComputedStyle(element).getPropertyValue("--my-var");

// 修改一个 Dom 节点上的 CSS 变量
element.style.setProperty("--my-var", jsVar + 4);

其他

• 自定义属性名称区分大小写
• 自定义属性具有继承性。即：如果为某个元素设置了自定义属性，却没有为该属性设置数值，则此处的数值将会使用父辈元素中定义了同名的自定义属性的数值。
• css自定义属性可以设置备用值，用于当该自定义属性没有设置数值的场景。例如：

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

• CSS 自定义属性可以级联。例如：

  .three {
    /* pink if --my-var and --my-background are not defined */
    background-color: var(--my-var, var(--my-background, pink)); 
  }
  

参考资料

• MDN-使用CSS自定义属性（变量）