当前位置：首页 > news >正文

CSS变量的应用

news 2025/10/9 8:11:13

在前端开发中，CSS 变量（CSS Custom Properties）为开发者提供了一种原生的、强大的方式来定义和使用可复用的值，极大地提升了样式的可维护性和动态性。

什么是CSS变量？

基本语法

CSS 变量的命名以两个连字符（--）开头，例如 --primary-color。

:root {--primary-color: #007bff;
}

:root 伪类选择器代表文档的根元素（通常是 html），在这里定义变量可以使变量在整个文档中全局可用。
变量值可以是颜色、长度、字符串等。

使用变量：`var()` 函数

要使用定义好的变量，需要使用 var 函数：

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

CSS变量的核心特性

1. 继承性

CSS 变量遵循 CSS 的继承规则。如果一个元素没有定义某个变量，它会从其父元素继承该变量的值。

.container {--text-color: #333;
}.container .title {color: var(--text-color); /* 继承自 .container */
}

2. 局部作用域

在任何选择器中定义变量，从而创建局部作用域：

.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 动态修改变量值，从而实时改变样式。

// 获取根元素
const root = document.documentElement;// 修改变量
root.style.setProperty('--primary-color', '#dc3545');

实际应用

例如主题切换

利用 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);
}

function toggleTheme() {const currentTheme = document.documentElement.getAttribute('data-theme');const newTheme = currentTheme === 'dark' ? '' : 'dark';document.documentElement.setAttribute('data-theme', newTheme);
}