CSS: CSS 变量
CSS 变量（Custom Properties，自定义属性）让你可以在 CSS 中定义可复用的值，类似于编程语言中的变量。使用 CSS 变量可以大大减少重复代码，方便统一管理主题色、间距等设计令牌。
1. 定义变量
CSS 变量使用自定义属性名（以 -- 开头）来声明：
▶ 示例
HTML
<style>
/* 在 :root 中定义全局变量 */
:root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
--text-color: #333;
--border-radius: 8px;
--spacing: 16px;
--font-size: 16px;
}
</style>
2. 使用变量
用 var() 函数引用变量：
▶ 示例
HTML
<style>
.button {
background-color: var(--primary-color);
color: white;
border-radius: var(--border-radius);
padding: var(--spacing);
font-size: var(--font-size);
}
.card {
border: 1px solid var(--primary-color);
border-radius: var(--border-radius);
padding: var(--spacing);
}
</style>
<button class="button">Buttond/button>
<div class="card">Card</div>
d!-- 占位文本 -->
3. 变量的作用域
CSS 变量的作用域由定义的位置决定：
全局变量——在 :root 中定义：
▶ 示例
HTML
<style>
:root {
--color: blue;
}
</style>
<div class="box-demo">演示盒子，展示当前属性的作用效果</div>
局部变量——在某个选择器中定义，只在该选择器及其子元素中生效：
▶ 示例
HTML
<style>
.card {
--card-bg: #f5f5f5;
--card-padding: 20px;
}
.card-header {
background: var(--card-bg);
padding: var(--card-padding);
}
</style>
<div class="card">Card</div>
<div class="card-header">Card header</div>
4. 变量的继承
CSS 变量会像普通 CSS 属性一样继承：
▶ 示例
HTML
<style>
:root {
--theme-color: #333;
}
/* 修改某个容器中的变量值 */
.dark-theme {
--theme-color: #eee;
}
.dark-theme .content {
color: var(--theme-color); /* #eee */
}
.content {
color: var(--theme-color); /* #333 */
}
</style>
<div class="dark-theme">暗色主题样式预览</div>
<div class="dark-theme">暗色主题样式预览</div>
<div class="content">主要内容区域</div>
<div class="content">主要内容区域</div>
5. var() 的备用值
var() 可以设置第二个参数作为备用值——当变量未定义时使用：
▶ 示例
HTML
<style>
.element {
color: var(--undefined-color, red); /* 因为 --undefined-color 未定义，使用 red */
background: var(--bg, var(--fallback, #eee)); /* 可以嵌套备用值 */
}
</style>
<div class="element">这是一个示例元素</div>
6. 通过 JavaScript 修改变量
✅ 主题切换实现： CSS 变量配合 JavaScript 是实现"暗黑模式"的最佳方案——在
dhtml> 上切换 data-theme 属性，CSS 中用变量引用不同颜色，一行 JS 代码就能切换整个站点的配色。
CSS 变量的一大优势是可以通过 JavaScript 动态修改：
▶ 示例
JAVASCRIPT
// 获取
const color = getComputedStyle(document.documentElement)
.getPropertyValue('--primary-color');
// 设置
document.documentElement.style.setProperty('--primary-color', '#e74c3c');
7. 实现主题切换
CSS 变量是实现"暗黑模式"等主题切换的最佳方式：
▶ 示例
HTML
<style>
/* 亮色主题（默认） */
:root {
--bg-color: #ffffff;
--text-color: #333333;
--card-bg: #f5f5f5;
--border-color: #dddddd;
}
/* 暗色主题 */
[data-theme="dark"] {
--bg-color: #1a1a2e;
--text-color: #eeeeee;
--card-bg: #16213e;
--border-color: #0f3460;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
</style>
然后通过 JavaScript 切换主题：
JAVASCRIPT
document.documentElement.setAttribute('data-theme', 'dark');
// 或
document.documentElement.setAttribute('data-theme', 'light');
8. CSS 变量的优势
- 减少重复代码：一个变量多处使用，修改只需改一处
- 运行时可修改：可以通过 JS 动态改变，实现主题切换
- 作用域控制：可以在特定容器中覆盖变量值
- 语义化：
--primary-color比#3498db更容易理解
9. 与预处理器的区别
CSS 变量（CSS 自定义属性）和 Sass/Less 中的变量不同：
| 特性 | CSS 变量 | Sass 变量 |
|---|---|---|
| 运行时修改 | ✅ 可以 | ❌ 编译后固定 |
| 作用域 | ✅ CSS 继承 | ❌ 编译后为固定值 |
| 浏览器 | 现代浏览器支持 | 无需浏览器支持（预编译） |
| JS 交互 | ✅ 可读写 | ❌ 无法访问 |
❓ 常见问题
Q CSS 变量和 Sass 变量有什么区别？
A CSS 变量是真正的 CSS 属性，可以在浏览器中动态修改，支持 JavaScript 读写。Sass 变量在编译后就变成了固定值，不能在运行时修改。CSS 变量可以做主题切换，Sass 变量不行。两者不冲突，可以配合使用。
Q CSS 变量的作用域规则是怎样的？
A CSS 变量遵循层叠规则。在
:root 中定义的变量全局可用，在某个元素上定义的变量只在该元素及其子元素中生效。利用这个特性可以做局部主题覆盖——给某个容器加不同的变量值，它内部所有引用该变量的地方自动变化。Q CSS 变量可以实现暗黑模式吗？
A 可以，这是 CSS 变量最经典的用途。在
:root 中定义亮色变量，在 [data-theme="dark"] 中覆盖为暗色值，然后一行 JavaScript document.documentElement.dataset.theme = "dark" 就能切换整个站点的配色。📖 小节
- CSS 变量是现代 CSS 开发中非常重要的工具
- 通过
--变量名定义，用var()使用，它让样式代码更整洁、更易维护 - 最大的价值在于：修改一个值，所有引用了该变量的地方自动更新
- 主题切换、响应式配色、统一设计语言——CSS 变量在大型项目中尤其有用
📝 作业
- 创建一个页面，使用 CSS 变量定义主题色、文字色、间距等至少 5 个变量，并在整个页面中使用它们。
- 基于上面的页面，实现"一键切换主题色"——在
:root中修改主色变量，观察页面所有相关元素的变化。 - 使用 CSS 变量实现一个简单的"白天/夜间"模式切换（通过 JS 切换 class 或 data-theme 属性）。
- 在某个容器（如一个卡片组件）中局部覆盖 CSS 变量的值，观察其子元素的样式变化。
