编辑“︁CSS变量使用”︁（章节）

= CSS变量使用 =

CSS自定义属性（通常称为CSS变量）是现代CSS中一项强大的功能，它允许开发者定义可重用的值，并在整个样式表中引用这些值。CSS变量提高了代码的可维护性、灵活性和可读性，尤其适用于大型项目或主题切换等场景。

== 基本概念 ==

CSS变量是带有前缀`--`的自定义属性，其值可以在整个文档中重复使用。它们的作用域遵循CSS层叠规则，并可以通过`var()`函数引用。

=== 定义变量 ===

CSS变量通常在根选择器（`:root`）中定义，使其成为全局变量。也可以在特定选择器中定义，形成局部变量。

<syntaxhighlight lang="css">
:root {
  --primary-color: #3498db;
  --spacing-unit: 16px;
}

.container {
  --container-padding: 20px;
}
</syntaxhighlight>

=== 使用变量 ===

通过`var()`函数调用变量值。如果变量未定义，可以指定一个备用值。

<syntaxhighlight lang="css">
.button {
  background-color: var(--primary-color);
  padding: var(--spacing-unit);
  margin: var(--non-existent-var, 10px); /* 使用备用值 */
}
</syntaxhighlight>

== 作用域与继承 ==

CSS变量遵循标准继承规则。全局变量定义在`:root`中，而局部变量仅在其选择器及其子元素中有效。

<mermaid>
graph TD
  A[:root] -->|定义全局变量| B[所有元素]
  C[.container] -->|定义局部变量| D[.container及其子元素]
</mermaid>

=== 示例：作用域演示 ===

<syntaxhighlight lang="css">
:root {
  --global-var: red;
}

.box {
  --local-var: blue;
  color: var(--local-var);
  border: 1px solid var(--global-var);
}

.child {
  color: var(--local-var); /* 继承父级变量 */
}
</syntaxhighlight>

== 动态更新与JavaScript交互 ==

CSS变量可以通过JavaScript动态修改，实现运行时样式调整。

<syntaxhighlight lang="javascript">
// 获取根元素
const root = document.documentElement;

// 修改变量值
root.style.setProperty('--primary-color', '#e74c3c');

// 读取变量值
const color = getComputedStyle(root).getPropertyValue('--primary-color');
</syntaxhighlight>

== 实际应用案例 ==

=== 案例1：主题切换 ===

通过修改变量值快速切换整个网站的主题色。

<syntaxhighlight lang="css">
:root {
  --bg-color: white;
  --text-color: black;
}

.dark-mode {
  --bg-color: #222;
  --text-color: white;
}

body {
  background: var(--bg-color);
  color: var(--text-color);
}
</syntaxhighlight>

=== 案例2：响应式间距 ===

使用变量统一管理不同屏幕尺寸下的间距。

<syntaxhighlight lang="css">
:root {
  --spacing: 8px;
}

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

.card {
  margin: var(--spacing);
}
</syntaxhighlight>

== 数学计算 ==

CSS变量可以与`calc()`结合实现动态计算。

<syntaxhighlight lang="css">
:root {
  --base-size: 10px;
}

.text {
  font-size: calc(var(--base-size) * 1.5);
}
</math>

== 注意事项 ==

1. 变量名区分大小写：`--color`和`--Color`是不同的变量
2. 避免使用CSS保留字作为变量名
3. 旧版浏览器（如IE11）不支持CSS变量
4. 过度使用可能降低代码可读性

== 总结 ==

CSS变量极大地提升了样式表的灵活性和可维护性。通过合理使用变量作用域、动态更新和数学计算，开发者可以创建更加模块化、适应性更强的CSS代码。初学者应从简单的颜色和尺寸变量开始，逐步掌握更高级的用法。

[[Category:编程语言]]
[[Category:CSS]]
[[Category:CSS自定义属性]]