CSS 自定义属性（变量）介绍

CSS 自定义属性，通常被称为 CSS 变量，是一种存储值的方式，这些值可以在整个文档中重复使用。自定义属性为 CSS 带来了更高的灵活性和可重用性，使得主题定制、样式共享等变得更加简单。

基本概念

1. 定义自定义属性

自定义属性通常在选择器 :root 中定义，这使得它们可以在全局范围内使用。

:root {
    --primary-color: #4caf50;
    --secondary-color: #ff9800;
}

在这个例子中，我们定义了两个自定义属性：--primary-color 和 --secondary-color。

2. 使用自定义属性

使用 var() 函数来引用自定义属性。

.button {
    background-color: var(--primary-color);
    color: white;
}

这里 .button 类的背景色被设置为 --primary-color 属性的值。

作用域

自定义属性遵循 CSS 的作用域规则。如果你在 :root 之外定义了自定义属性，那么它只能在该选择器及其子元素中使用。

.container {
    --container-bg-color: #e0e0e0;
}

.container .box {
    background-color: var(--container-bg-color);
}

使用场景

• 主题定制：可以轻松定义和使用不同的主题颜色或字体大小。
• 可维护的样式：在项目中维护和更新样式变得更加方便，尤其是在大型项目中。
• 响应式设计：结合媒体查询，可以根据不同的屏幕尺寸应用不同的样式。

注意事项

• 自定义属性是大小写敏感的。
• 老版本的浏览器可能不支持 CSS 变量，因此在使用时需考虑浏览器的兼容性。
• 自定义属性可以被 JavaScript 读取和修改，这为动态主题和样式调整提供了可能。

CSS 自定义属性开辟了一个全新的样式定义方式，使得样式表的维护和扩展更加高效和简单。随着浏览器支持度的提高，它们正在成为现代前端开发的重要工具。