编辑“︁CSS变量声明”︁（章节）

= CSS变量声明 =

'''CSS变量声明'''（也称为'''CSS自定义属性'''）是CSS3引入的一项功能，允许开发者定义可重用的值，并在整个样式表中引用这些值。通过使用变量，开发者可以更轻松地维护和修改样式，特别是在大型项目中。

== 介绍 ==

CSS变量声明通过`--`前缀定义，并在`var()`函数中引用。变量可以在任何CSS选择器中声明，但通常建议在`:root`伪类中定义全局变量，以确保它们在整个文档中可用。

CSS变量的主要优点包括：
* '''可维护性'''：通过修改变量的值，可以快速更新整个网站的样式。
* '''可读性'''：变量名可以描述其用途，使代码更易于理解。
* '''动态性'''：变量可以通过JavaScript动态修改，实现主题切换等功能。

== 基本语法 ==

CSS变量的声明和引用语法如下：

<syntaxhighlight lang="css">
/* 声明变量 */
:root {
  --primary-color: #3498db;
  --padding-large: 20px;
}

/* 引用变量 */
.element {
  color: var(--primary-color);
  padding: var(--padding-large);
}
</syntaxhighlight>

=== 变量命名规则 ===
* 变量名必须以`--`开头。
* 变量名区分大小写（`--color`和`--Color`是不同的变量）。
* 变量名可以包含字母、数字、下划线和连字符。

== 作用域 ==

CSS变量的作用域遵循CSS的层叠规则。如果在局部选择器中声明变量，则该变量仅在该选择器及其子元素中有效。

<syntaxhighlight lang="css">
/* 全局变量 */
:root {
  --global-color: red;
}

/* 局部变量 */
.container {
  --local-color: blue;
}

/* 引用变量 */
.box {
  color: var(--global-color); /* 红色 */
  background-color: var(--local-color); /* 蓝色 */
}
</syntaxhighlight>

== 默认值 ==

`var()`函数支持指定默认值，当引用的变量未定义时，将使用默认值：

<syntaxhighlight lang="css">
.element {
  color: var(--undefined-color, black); /* 如果--undefined-color未定义，则使用黑色 */
}
</syntaxhighlight>

== 实际应用案例 ==

=== 主题切换 ===
CSS变量常用于实现动态主题切换。以下是一个简单的示例：

<syntaxhighlight lang="html">
<!DOCTYPE html>
<html>
<head>
  <style>
    :root {
      --bg-color: white;
      --text-color: black;
    }

    body {
      background-color: var(--bg-color);
      color: var(--text-color);
    }
  </style>
</head>
<body>
  <h1>主题切换示例</h1>
  <button onclick="toggleTheme()">切换主题</button>

  <script>
    function toggleTheme() {
      const root = document.documentElement;
      if (root.style.getPropertyValue('--bg-color') === 'black') {
        root.style.setProperty('--bg-color', 'white');
        root.style.setProperty('--text-color', 'black');
      } else {
        root.style.setProperty('--bg-color', 'black');
        root.style.setProperty('--text-color', 'white');
      }
    }
  </script>
</body>
</html>
</syntaxhighlight>

=== 响应式设计 ===
CSS变量可以与媒体查询结合使用，实现响应式设计：

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

@media (max-width: 768px) {
  :root {
    --font-size: 14px;
  }
}

body {
  font-size: var(--font-size);
}
</syntaxhighlight>

== 高级用法 ==

=== 计算值 ===
CSS变量可以与`calc()`函数结合使用：

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

.element {
  padding: calc(var(--base-size) * 2);
}
</syntaxhighlight>

=== 继承 ===
CSS变量遵循继承规则，子元素会继承父元素的变量值：

<syntaxhighlight lang="css">
.parent {
  --custom-color: green;
}

.child {
  color: var(--custom-color); /* 绿色 */
}
</syntaxhighlight>

== 浏览器兼容性 ==

CSS变量在现代浏览器中得到广泛支持，但在旧版浏览器（如IE11）中不受支持。可以使用`@supports`规则检测浏览器是否支持CSS变量：

<syntaxhighlight lang="css">
@supports (--css: variables) {
  /* 支持CSS变量的样式 */
}

@supports not (--css: variables) {
  /* 不支持CSS变量的备用样式 */
}
</syntaxhighlight>

== 最佳实践 ==

* 在`:root`中定义全局变量，确保它们在整个文档中可用。
* 使用有意义的变量名（如`--primary-color`而不是`--color1`）。
* 为变量提供合理的默认值，以提高代码的健壮性。
* 避免过度使用变量，仅在需要复用的值上使用它们。

== 总结 ==

CSS变量声明是一项强大的功能，可以显著提高样式表的可维护性和灵活性。通过合理使用变量，开发者可以更高效地管理样式，并实现动态主题切换等高级功能。

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