CSS 变量（自定义属性）

CSS 变量，官方名称为自定义属性 (Custom Properties)，允许你在 CSS 中定义可重用的值。这极大地增强了 CSS 的能力，减少了代码重复，并使得主题切换、响应式设计和组件化样式管理变得更加容易。

声明一个自定义属性

自定义属性的名称必须以两个连字符 -- 开头。它们通常在 :root 伪类中声明，这样就可以在整个文档中全局访问。

:root 伪类匹配文档的根元素，在 HTML 中就是 <html> 元素。在 :root 中声明的变量可以被看作是“全局变量”。

:root {
  --main-bg-color: #f0f2f5;
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --base-font-size: 16px;
  --container-max-width: 1140px;
}

你也可以在一个特定的选择器下声明变量，这样它就只在该选择器及其后代元素中可用（“局部变量”）。

.card {
  --card-padding: 20px;
}

使用自定义属性

要使用一个自定义属性，你需要使用 var() 函数。

var(--custom-property-name, <fallback-value>);

--custom-property-name: 你想要使用的变量的名称。
<fallback-value> (可选): 一个备用值。如果指定的变量未定义，浏览器将使用这个备用值。

body {
  background-color: var(--main-bg-color);
  font-size: var(--base-font-size);
}

a {
  color: var(--primary-color);
}

.container {
  max-width: var(--container-max-width);
}

.card {
  padding: var(--card-padding, 15px); /* 如果 --card-padding 未定义，则使用 15px */
}

CSS 变量的优势

1. 减少重复 (DRY - Don't Repeat Yourself)

你可以在一个地方定义颜色、字体、间距等，然后在整个样式表中重用它们。如果需要更改，只需修改变量的定义即可。

2. 动态性和响应式

CSS 变量是动态的。这意味着你可以使用 JavaScript 来读取和修改它们，也可以在媒体查询中重新定义它们的值。

示例：响应式字体大小

:root {
  --heading-font-size: 2rem;
}

@media (min-width: 768px) {
  :root {
    --heading-font-size: 3rem;
  }
}

h1 {
  font-size: var(--heading-font-size);
}

示例：主题切换 (Dark Mode)

/* 默认亮色主题 */
:root {
  --bg-color: #fff;
  --text-color: #333;
}

/* 暗色主题 */
body.dark-mode {
  --bg-color: #121212;
  --text-color: #eee;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

然后用 JavaScript 来切换 body 上的 dark-mode 类。

3. 与 `calc()` 结合

CSS 变量可以与 calc() 函数无缝协作，进行动态计算。

:root {
  --base-spacing: 1rem;
}

.element {
  margin-bottom: calc(var(--base-spacing) * 2);
}

4. 更好的语义化

--primary-color 比 #007bff 更具可读性和语义。它描述了颜色的用途，而不仅仅是它的值。

CSS 变量是现代 CSS 开发的基石之一，它弥合了纯 CSS 与 CSS 预处理器（如 Sass/Less）之间的一些差距，并为在浏览器中实现动态、可维护的样式系统提供了原生支持。

#CSS 变量（自定义属性）

#声明一个自定义属性

#使用自定义属性

#CSS 变量的优势

#1. 减少重复 (DRY - Don't Repeat Yourself)

#2. 动态性和响应式

#3. 与 calc() 结合

#4. 更好的语义化