一、什么是CSS自定义属性
CSS自定义属性，也被称为CSS变量，是一种允许开发者定义和复用值的机制。它允许我们在CSS中创建自己的变量，并在整个文档或特定部分中重复使用这些变量。这种机制提高了样式的可维护性和可读性。
二、背景
在CSS中，我们经常需要重复使用相同的值，如颜色、字体大小、边距等。这些值被称为“魔术数字”，它们缺乏语义，不易于管理和维护。CSS自定义属性的出现，使得我们可以将这些值定义为变量，从而简化代码并提高可维护性。
三、作用
- 提高代码可读性：使用有意义的变量名替代魔术数字，使代码更易于理解和维护。
- 简化样式修改：只需在一个地方修改变量的值，所有使用该变量的样式都会自动更新。
- 增强复用性：可以在不同的CSS规则集中复用相同的变量值。
四、使用方法
4.1 声明
CSS变量的声明使用两个连字符（–）开头，后面跟着属性名和冒号，再跟上属性值。通常在:root伪类中选择器下声明全局变量。
:root {
--main-color: #3498db;
--secondary-color: #2ecc71;
}
4.2 使用
使用var()函数来引用CSS变量。可以将变量值作为任何CSS属性的值。
body {
background-color: var(--main-color);
color: var(--secondary-color);
}
4.3 默认值
可以为CSS变量设置默认值，以便在变量未定义时使用。
body {
background-color: var(--main-color, #fff);
}
4.4 作用域
CSS变量具有作用域，通常在定义它们的元素及其子元素中可用。如果在一个元素内重新定义一个变量，那么该新值将仅在该元素及其子元素内有效。
4.5 空格尾随特性
CSS变量具有空格尾随特性，这意味着变量名后可以跟一个空格。
--main-color: #3498db;
body {
background-color: var(--main-color );
}
4.6 配合calc方法使用
CSS变量可以与calc()函数一起使用，进行计算。
--gap: 20;
.foo {
margin-top: calc(var(--gap) / 2);
}
4.7 行内style属性中使用
CSS变量也可以在行内style属性中使用。
<div style="--main-color: #3498db;">...</div>
4.8 在JavaScript中操作
可以使用JavaScript动态修改CSS变量。
document.documentElement.style.setProperty('--main-color', '#e74c3c');
五、主题变换实例
以下是一个使用CSS变量的主题变换实例：
:root {
--main-color: #3498db;
--secondary-color: #2ecc71;
}
body {
background-color: var(--main-color);
color: var(--secondary-color);
}
.button {
background-color: var(--main-color);
color: white;
}
.button:hover {
background-color: darken(var(--main-color), 10%);
}
<div class="button">点击我</div>
在这个例子中，我们定义了全局变量--main-color和--secondary-color，并在不同的CSS规则集中使用它们。我们还演示了如何使用JavaScript动态修改--main-color变量的值。
通过使用CSS自定义属性，我们可以轻松地创建可维护、可复用的样式，并实现主题变换等高级功能。