CSS 变量（自定义属性）
CSS 变量，官方名称为自定义属性 (Custom Properties)，允许你在 CSS 中定义可重用的值。这极大地增强了 CSS 的能力，减少了代码重复，并使得主题切换、响应式设计和组件化样式管理变得更加容易。
声明一个自定义属性
自定义属性的名称必须以两个连字符 -- 开头。它们通常在 :root 伪类中声明，这样就可以在整个文档中全局访问。
:root 伪类匹配文档的根元素，在 HTML 中就是 <html> 元素。在 :root 中声明的变量可以被看作是“全局变量”。
css
:root {
--main-bg-color: #f0f2f5;
--primary-color: #007bff;
--secondary-color: #6c757d;
--base-font-size: 16px;
--container-max-width: 1140px;
}你也可以在一个特定的选择器下声明变量，这样它就只在该选择器及其后代元素中可用（“局部变量”）。
css
.card {
--card-padding: 20px;
}使用自定义属性
要使用一个自定义属性，你需要使用 var() 函数。
var(--custom-property-name, <fallback-value>);
--custom-property-name: 你想要使用的变量的名称。<fallback-value>(可选): 一个备用值。如果指定的变量未定义，浏览器将使用这个备用值。
css
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 来读取和修改它们，也可以在媒体查询中重新定义它们的值。
示例：响应式字体大小
css
:root {
--heading-font-size: 2rem;
}
@media (min-width: 768px) {
:root {
--heading-font-size: 3rem;
}
}
h1 {
font-size: var(--heading-font-size);
}示例：主题切换 (Dark Mode)
css
/* 默认亮色主题 */
: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() 函数无缝协作，进行动态计算。
css
:root {
--base-spacing: 1rem;
}
.element {
margin-bottom: calc(var(--base-spacing) * 2);
}4. 更好的语义化
--primary-color 比 #007bff 更具可读性和语义。它描述了颜色的用途，而不仅仅是它的值。
CSS 变量是现代 CSS 开发的基石之一，它弥合了纯 CSS 与 CSS 预处理器（如 Sass/Less）之间的一些差距，并为在浏览器中实现动态、可维护的样式系统提供了原生支持。