深入理解CSS变量(Custom Properties)

1. 基础概念与语法

CSS变量也称为CSS自定义属性，使用--前缀定义：

css 复制代码

:root {
--main-color: #3498db;
--padding: 15px;
}

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

特性：

以--开头命名（如--main-color）
大小写敏感
使用var()函数调用变量
可以设置默认值：var(--color, red)

2. 作用域与优先级

CSS变量遵循CSS层叠规则：

css 复制代码

:root {
--size: 16px;
}

.container {
--size: 14px; /* 局部覆盖 */
}

.text {
font-size: var(--size); /* 在.container内是14px，外部是16px */
}

作用域图解：

3. JavaScript动态交互

JavaScript可以实时读取和修改CSS变量：

javascript 复制代码

// 获取变量
const root = document.documentElement;
const color = getComputedStyle(root).getPropertyValue('--main-color');

// 修改变量
root.style.setProperty('--main-color', 'red');

// 动态响应式示例
window.addEventListener('resize', () => {
const fontSize = window.innerWidth < 600 ? '14px' : '16px';
root.style.setProperty('--base-size', fontSize);
});

4. 实战应用案例

案例1：主题切换

css 复制代码

:root {
--bg-primary: #ffffff;
--text-primary: #333333;
}

.dark-mode {
--bg-primary: #222222;
--text-primary: #f0f0f0;
}

body {
background: var(--bg-primary);
color: var(--text-primary);
transition: all 0.3s;
}

案例2：响应式间距系统

css 复制代码

:root {
--spacing: 8px;
}

@media (min-width: 768px) {
:root {
 --spacing: 16px;
}
}

.card {
margin: var(--spacing);
padding: calc(var(--spacing) * 2);
}

5. 性能优化建议

避免过度嵌套：深层次的变量引用会增加解析时间
合理作用域：将变量定义在尽可能接近使用的地方
动态变量慎用：频繁通过JS更新的变量可能引起重排
预处理器对比：比LESS/SASS变量具有运行时可变的优势
兼容性处理：提供fallback值

css 复制代码

/* 推荐写法 */
.element {
color: var(--primary-color, blue); /* 添加默认值 */
font-size: var(--text-size, 16px);
}