在前端开发中,CSS 变量(CSS Custom Properties)为开发者提供了一种原生的、强大的方式来定义和使用可复用的值,极大地提升了样式的可维护性和动态性。
什么是CSS变量?
基本语法
CSS 变量的命名以两个连字符(--
)开头,例如 --primary-color
。
css
:root {
--primary-color: #007bff;
}
:root
伪类选择器代表文档的根元素(通常是 html),在这里定义变量可以使变量在整个文档中全局可用。- 变量值可以是颜色、长度、字符串等。
使用变量:var()
函数
要使用定义好的变量,需要使用 var 函数:
css
.button {
background-color: var(--primary-color);
color: white;
}
CSS变量的核心特性
1. 继承性
CSS 变量遵循 CSS 的继承规则。如果一个元素没有定义某个变量,它会从其父元素继承该变量的值。
css
.container {
--text-color: #333;
}
.container .title {
color: var(--text-color); /* 继承自 .container */
}
2. 局部作用域
在任何选择器中定义变量,从而创建局部作用域:
css
.card {
--card-bg: #fff;
--card-shadow: 0 2px 8px rgba(0,0,0,0.1);
background: var(--card-bg);
box-shadow: var(--card-shadow);
}
3. 动态修改
通过 JavaScript 动态修改变量值,从而实时改变样式。
javascript
// 获取根元素
const root = document.documentElement;
// 修改变量
root.style.setProperty('--primary-color', '#dc3545');
实际应用
例如主题切换
利用 CSS 变量,可以实现亮色/暗色主题切换。
css
:root {
--bg-color: #ffffff;
--text-color: #333333;
--accent-color: #007bff;
}
[data-theme="dark"] {
--bg-color: #1a1a1a;
--text-color: #f0f0f0;
--accent-color: #00bcd4;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
.accent {
color: var(--accent-color);
}
javascript
function toggleTheme() {
const currentTheme = document.documentElement.getAttribute('data-theme');
const newTheme = currentTheme === 'dark' ? '' : 'dark';
document.documentElement.setAttribute('data-theme', newTheme);
}
兼容性
CSS 变量在现代浏览器中支持良好:
- Chrome 49+
- Firefox 31+
- Safari 9.1+
- Edge 79+
- 不支持 IE
对于需要支持旧版浏览器的项目,可以考虑使用 PostCSS 插件进行降级处理。