深入解析CSS中的自定义属性

深入解析CSS中的自定义属性，以下是完整攻略：

什么是自定义属性

自定义属性（Custom Properties），又称变量（Variables）。它是CSS新增的一项功能，用于保存一个值，然后可以在整个文档中随时调用它。解析时会替换为具体的值。

自定义属性可以使用--开头的名称声明，如:

:root{
  --main-color: #333;
}

这个样式表规则定义了一个 main-color 的自定义属性值为 #333。在 CSS 中使用这个自定义属性只需要使用 var(--main-color)即可。如：

p {
  color: var(--main-color);
}

虽然自定义属性的名字可以使用任意的名称，但推荐使用有意义的名称，便于阅读和维护。

自定义属性的作用

自定义属性拥有多种作用，比如：

1. 统一管理颜色、尺寸等常用的变量，方便CSS maintenance。
2. 改变样式时只需修改自定义属性的值，不需要改写多个class或id。
3. 某些组件或模块内部样式的继承和复用。

如何使用自定义属性

自定义属性有三种使用方式：

直接使用

p {
  color: var(--main-color);
  background-color: var(--bg-color);
  font-size: var(--font-size);
}

使用var函数，把自定义属性插入到css中对应的属性值中即可使用。CSS解析时，自定义属性会被替换成声明它的值。

嵌套使用

嵌套使用指当某个标签是另一个标签的子元素时，继承他的自定义属性。

.wrapper {
  --background-color: #f5f5f5;
}

.card{
  background-color: var(--background-color);
  padding: 10px;
}

这里定义的变量background-color为当前元素.card的背景色，当.wrapper样式值改变时，.card自动继承，无需再次定义。

JS使用

在 JavaScript 中，可以使用CSSStyleDeclaration.setProperty() 方法、Window.getComputedStyle() 方法修改或获取元素的自定义属性值。

// 获取自定义属性的值
let element = document.querySelector('p');
let mainColor = getComputedStyle(element).getPropertyValue('--main-color');

// 修改自定义属性
element.style.setProperty('--main-color', blue);

示例说明

示例1：使用自定义属性实现宽度自适应的边框

<div class="border-box">这是一个内容不定的容器</div>

.border-box {
  width: 50%;
  padding: 10px;
  background-color: var(--bg-color);
  border: solid 1px var(--main-color);
}

在这个示例中，我们声明了两个自定义属性——bg-color和main-color，用来指定背景色和边框颜色。同时，容器的宽度为50%，自适应浏览器宽度的变化。

示例2：使用自定义属性实现灰度主题

:root {
  --text-color: #333;
  --bg-color: #fff;
}

.dark-theme {
  --text-color: #fff;
  --bg-color: #333;
}

body {
  color: var(--text-color);
  background-color: var(--bg-color);
}

在这个示例中，我们使用自定义属性来指定文本颜色和背景色。同时，定义了灰度主题的样式为黑色背景白色文本。在html中的任何标记内添加class=dark-theme就会给整个文档应用这个主题。