编辑“︁CSS变量概念”︁（章节）

= CSS变量概念 =

'''CSS自定义属性'''（通常称为'''CSS变量'''）是CSS中用于存储可重用值的强大工具，允许开发者定义一次值并在整个样式表中多次引用。它们通过减少重复代码、提高可维护性并支持动态主题切换等功能，显著提升了CSS的可扩展性。

== 基本概念 ==

CSS变量通过`--`前缀定义，并通过`var()`函数引用。其核心特点包括：
* '''作用域'''：遵循CSS层叠规则，可在全局（`:root`）或局部（特定选择器）定义
* '''动态性'''：可通过JavaScript实时修改
* '''继承性'''：子元素会继承父元素的变量值

=== 语法结构 ===
<pre>
/* 定义变量 */
--variable-name: value;

/* 使用变量 */
property: var(--variable-name, fallback-value);
</pre>

== 变量定义与使用 ==

=== 全局变量示例 ===
<syntaxhighlight lang="css">
:root {
  --primary-color: #3498db;
  --spacing-unit: 16px;
}

.button {
  background-color: var(--primary-color);
  padding: var(--spacing-unit);
}
</syntaxhighlight>

=== 局部变量示例 ===
<syntaxhighlight lang="css">
.card {
  --card-bg: #f8f9fa;
  background: var(--card-bg);
}

.dark-mode .card {
  --card-bg: #2c3e50;
}
</syntaxhighlight>

== 作用域与继承 ==

CSS变量的作用域遵循DOM结构，形成层级关系：

<mermaid>
graph TD
  A[:root] -->|定义全局变量| B[body]
  B --> C[.container]
  C --> D[.card]
  D --> E[.card-title]
</mermaid>

== 实际应用案例 ==

=== 主题切换实现 ===
<syntaxhighlight lang="css">
:root {
  --bg-color: white;
  --text-color: black;
}

.dark-theme {
  --bg-color: #222;
  --text-color: #eee;
}

body {
  background: var(--bg-color);
  color: var(--text-color);
  transition: all 0.3s ease;
}
</syntaxhighlight>

=== 响应式间距系统 ===
<syntaxhighlight lang="css">
:root {
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
}

@media (min-width: 768px) {
  :root {
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
  }
}
</syntaxhighlight>

== 高级用法 ==

=== 计算与数学运算 ===
CSS变量可与`calc()`结合使用：
<syntaxhighlight lang="css">
:root {
  --base-size: 16px;
}

h1 {
  font-size: calc(var(--base-size) * 2);
}
</syntaxhighlight>

=== 变量拼接 ===
通过组合变量构建复杂值：
<syntaxhighlight lang="css">
:root {
  --main-color: 255, 0, 0;
}

.element {
  color: rgba(var(--main-color), 0.5);
}
</syntaxhighlight>

== 浏览器支持与回退方案 ==

CSS变量在现代浏览器中得到广泛支持（IE11除外）。提供回退值的两种方式：

1. 直接在`var()`函数中指定：
<syntaxhighlight lang="css">
color: var(--custom-color, black);
</syntaxhighlight>

2. 使用特性检测：
<syntaxhighlight lang="css">
@supports (--css: variables) {
  /* 变量支持时的样式 */
}
@supports not (--css: variables) {
  /* 变量不支持时的样式 */
}
</syntaxhighlight>

== 性能考虑 ==

* 变量计算发生在渲染时
* 过度嵌套变量可能影响性能
* 推荐将频繁变化的变量定义在元素级而非`:root`

== 最佳实践 ==

1. 命名采用语义化方式（如`--color-primary`而非`--blue`）
2. 全局变量定义在`:root`中
3. 为重要变量提供文档注释
4. 避免过度使用导致样式表难以维护

<syntaxhighlight lang="css">
/**
 * 主题颜色变量
 * @type color
 */
--theme-primary: #3498db;
</syntaxhighlight>

== 数学表示 ==

CSS变量可以参与数学计算。例如颜色转换公式：

<math>
R' = R \times \alpha + B \times (1 - \alpha)
</math>

实现代码：
<syntaxhighlight lang="css">
--foreground-rgb: 255, 0, 0;
--background-rgb: 0, 0, 255;
--alpha: 0.5;
color: rgb(
  calc(var(--foreground-r) * var(--alpha) + var(--background-r) * (1 - var(--alpha))),
  calc(var(--foreground-g) * var(--alpha) + var(--background-g) * (1 - var(--alpha))),
  calc(var(--foreground-b) * var(--alpha) + var(--background-b) * (1 - var(--alpha)))
);
</syntaxhighlight>

== 总结 ==

CSS变量极大增强了样式表的灵活性和可维护性，通过本文介绍的基础用法到高级技巧，开发者可以：
* 创建统一的视觉系统
* 实现动态主题切换
* 构建响应式间距系统
* 简化复杂计算
* 提高代码复用率

随着CSS生态的发展，变量已成为现代前端开发的核心技术之一。

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