编辑“︁CSS变量继承”︁（章节）

= CSS变量继承 =

CSS变量继承（CSS Variable Inheritance）是CSS自定义属性（Custom Properties）的一个重要特性，它允许开发者通过层叠和继承机制在DOM树中传递变量值。理解这一概念有助于编写更高效、可维护的样式表。

== 介绍 ==

CSS变量（也称为自定义属性）使用<code>--</code>前缀定义，并通过<code>var()</code>函数调用。这些变量可以像普通CSS属性一样被继承，遵循CSS的层叠规则。当父元素定义了一个CSS变量时，其子元素可以继承该变量的值，除非子元素显式覆盖它。

== 基本语法 ==

CSS变量的定义和继承语法如下：

<syntaxhighlight lang="css">
/* 定义全局变量 */
:root {
  --main-color: blue;
}

/* 继承变量 */
.parent {
  color: var(--main-color); /* 使用全局变量 */
}

.child {
  /* 子元素继承 --main-color，除非显式覆盖 */
  color: var(--main-color);
}
</syntaxhighlight>

== 继承机制 ==

CSS变量的继承遵循以下规则：
1. 如果变量在元素上定义，则使用该值。
2. 如果未定义，则查找父元素的值，直到根元素（<code>:root</code>）。
3. 如果变量在任何祖先中均未定义，则使用初始值（或备用值）。

=== 继承示例 ===

<syntaxhighlight lang="html">
<div class="parent">
  Parent text
  <div class="child">Child text</div>
</div>
</syntaxhighlight>

<syntaxhighlight lang="css">
.parent {
  --text-color: red;
  color: var(--text-color);
}

.child {
  /* 继承 --text-color 的值 */
  color: var(--text-color);
}
</syntaxhighlight>

输出效果：
* Parent text 显示为红色。
* Child text 同样显示为红色，因为它继承了<code>--text-color</code>。

== 覆盖继承的变量 ==

子元素可以覆盖从父元素继承的变量值：

<syntaxhighlight lang="css">
.parent {
  --text-color: red;
}

.child {
  --text-color: blue; /* 覆盖继承的值 */
  color: var(--text-color);
}
</syntaxhighlight>

此时：
* Parent text 仍为红色。
* Child text 变为蓝色。

== 实际应用案例 ==

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

CSS变量继承常用于主题切换。例如，定义一个全局主题色，并在不同组件中继承或覆盖：

<syntaxhighlight lang="css">
:root {
  --theme-primary: #4285f4;
}

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

.dark-mode {
  --theme-primary: #1a1a1a; /* 覆盖全局变量 */
}
</syntaxhighlight>

=== 案例2：组件样式隔离 ===

在组件化开发中，可以通过变量继承实现样式隔离：

<syntaxhighlight lang="css">
.card {
  --card-padding: 1rem;
  padding: var(--card-padding);
}

.card.compact {
  --card-padding: 0.5rem; /* 覆盖默认值 */
}
</syntaxhighlight>

== 继承与层叠的关系 ==

CSS变量的继承与层叠（Cascading）紧密相关。以下是一个层叠优先级示例：

<mermaid>
graph TD
  :root[":root\n--color: red"] -->|继承| Parent["Parent\n--color: green"]
  Parent -->|继承| Child["Child"]
  Child -->|最终值| Result["color: green"]
</mermaid>

解释：
1. <code>:root</code> 定义 <code>--color: red</code>。
2. Parent 覆盖为 <code>--color: green</code>。
3. Child 继承 Parent 的值，最终使用 <code>green</code>。

== 数学计算与变量继承 ==

CSS变量可以与<code>calc()</code>结合使用，实现动态计算：

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

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

.small-text {
  --base-size: 12px; /* 覆盖继承的值 */
}
</syntaxhighlight>

== 注意事项 ==
* 变量名区分大小写：<code>--color</code> 和 <code>--Color</code> 是不同的变量。
* 如果变量未定义且未提供备用值，则属性可能无效。
* 继承的变量值不会被重新计算，除非显式覆盖。

== 总结 ==
CSS变量继承通过层叠机制传递值，使样式表更灵活和可维护。开发者可以利用这一特性实现主题切换、组件隔离和动态样式计算。理解继承规则有助于避免意外的样式冲突。

<!-- 如果需要公式示例 -->
<math>
  \text{最终值} = \begin{cases}
    \text{显式定义值} & \text{如果存在} \\
    \text{继承值} & \text{否则}
  \end{cases}
</math>

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