10.1 声明变量
CSS中的变量，也被称为自定义属性 (CSS Custom Properties)，可以让开发者在一个地方保存属性值并在文档中重复使用它们。这让CSS更加灵活和易于管理，特别是在处理大型项目时。
声明变量
CSS中的变量使用 两个连字符 (--) 来声明在变量名前。通常它们在 :root 选择器中声明，以便在整个文档中可用。
语法：
:root {
--变量名: 值;
--变量名: 值;
}
例子：
在这个例子中，声明了三个变量：--main-color、--secondary-color 和 --font-size。
:root {
--main-color: #3498db;
--secondary-color: #2ecc71;
--font-size: 16px;
}
10.2 使用变量
使用变量时，应用函数 var()，该函数接受变量名作为参数。
语法：
选择器 {
属性: var(--变量名);
属性: var(--变量名);
}
例子：
这个例子使用之前声明的变量来为 <body> 元素设置背景、文本颜色和字体大小。
CSS
body {
background-color: var(--main-color);
color: var(--secondary-color);
font-size: var(--font-size);
}
10.3 变量的继承和重定义
CSS变量继承于元素的层级结构。这意味着如果一个元素中声明了一个变量，它的子元素也可以访问这个变量。变量也可以在其他选择器中重新定义。
例子：
在这个例子中，元素 .header 重新定义了变量 --main-color，这个新变量仅应用于它。同时，元素 .footer 使用在 :root 中声明的变量值。
HTML
<div class="header">Header</div>
<div class="footer">Footer</div>
CSS
:root {
--main-color: #3498db;
}
.header {
--main-color: #e74c3c;
background-color: var(--main-color);
}
.footer {
background-color: var(--main-color);
}
10.4 使用CSS变量的优势
1. 简化样式管理：
变量允许你在一个地方更改一个属性的值，该更改会自动应用到使用该变量的所有地方。这对于主题化和保持一致的风格特别有用。
2. 改善代码的可读性和可维护性：
使用变量使CSS代码更具可读性和可理解性，因为它们可以用于描述可能具有语义意义的值，例如颜色和尺寸 （例如，--main-color 而不是 #3498db）。
3. 动态更新样式：
变量可以通过JavaScript动态更改，从而创建更具互动性和动态化的用户界面。
GO TO FULL VERSION