CSS自定义属性通过--定义变量，配合var()函数实现值复用，提升样式维护性。示例：:root { --primary-color: #007bff; }，.button { background-color: var(--primary-color); }，支持默认值、作用域与JavaScript动态修改，适用于主题切换与响应式设计，现代浏览器广泛支持。
CSS 属性值确实可以使用变量，这是通过 CSS 自定义属性（Custom Properties）配合 var() 函数实现的。这种机制让开发者可以在样式表中定义可复用的值，提升维护效率和代码清晰度。
什么是CSS自定义属性
CSS 自定义属性是用户定义的、以两个连字符（--）开头的属性名，用于存储可重用的值。它们可以定义在任意选择器上，通常推荐定义在根元素（:root）中，以便全局访问。
例如：
:root {
--primary-color: #007bff;
--border-radius: 8px;
--font-size-large: 1.5rem;
}
这些值不会直接作用于页面，而是作为“变量”被其他属性通过 var() 引用。
如何使用var()函数引用变量
var() 函数用于读取自定义属性的值，并将其插入到标准 CSS 属性中。语法为 var(--variable-name)，也可设置默认值作为备选。
立即学习“前端免费学习笔记（深入）”；
基本用法示例：
.button {
background-color: var(--primary-color);
border-radius: var(--border-radius);
font-size: var(--font-size-large);
}
.card {
color: var(--text-color, #333);
padding: var(--spacing, 16px);
}
当 --text-color 未定义时，将使用 #333 作为默认颜色。
变量的作用域与继承
自定义属性遵循 CSS 的层叠和继承规则。定义在 :root 中的变量全局可用；定义在特定类或元素上的变量，仅在该元素及其子元素中有效。
作用域示例：
.theme-dark {
--primary-color: #ff6b6b;
}
.theme-dark .button {
background-color: var(--primary-color); /* 使用红色 */
}
当 .button 在 .theme-dark 内部时，会使用局部定义的 --primary-color。
实用场景与优势
使用 CSS 变量适合管理主题色、间距、字体层级等统一设计系统。
- 便于实现夜间模式切换：通过 JavaScript 动态修改变量值即可批量更新样式
- 减少重复代码，提高可维护性
- 支持响应式设计中的动态调整
document.documentElement.style.setProperty('--primary-color', '#ff9900');
这行代码能即时改变整个页面中所有引用该变量的样式。
基本上就这些。CSS 自定义属性 + var() 提供了原生的变量支持，无需预处理器也能写出更灵活、易维护的样式代码。注意兼容性：现代浏览器普遍支持，IE 不支持需评估使用场景。
