第 17 讲：css 变量 – 简化样式表
在本次讲座中，我们将了解 css 变量（也称为自定义属性）以及它们如何通过允许您在样式表中重用值来帮助简化代码。
1.什么是 css 变量？
css 变量使您能够将颜色、字体大小或间距等值存储在中心位置，并在整个样式表中重复使用它们。这使您的代码更易于维护，因为您可以轻松地在一处更新值，而无需搜索整个样式表。
css 变量使用 -- 前缀定义，您可以使用 var() 函数访问它们。
2.定义 css 变量
css 变量通常在 :root 选择器中定义，它代表文档的顶层。
立即学习“前端免费学习笔记（深入）”；
示例：
:root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
--font-size: 16px;
}
body {
font-size: var(--font-size);
color: var(--primary-color);
}
h1 {
color: var(--secondary-color);
}
在此示例中：
- 我们定义 --primary-color、--secondary-color 和 --font-size 作为我们的自定义变量。
- 然后通过 var() 函数在 body 和 h1 样式中使用这些变量。
3.使用 css 变量的好处
- 可重用性：您可以在整个样式表中重用相同的值，从而减少代码重复。
- 可维护性：如果需要更改颜色或字体大小，只需在一处更新变量的值即可。
- 动态更新：css 变量可以使用 javascript 动态更新，从而在创建交互式设计时更加灵活。
4.覆盖 css 变量
您可以覆盖特定选择器中的 css 变量以提供特定于上下文的值。
示例：
:root {
--primary-color: #3498db;
}
.dark-mode {
--primary-color: #34495e;
}
body {
color: var(--primary-color);
}
在此示例中，当应用 .dark-mode 类时，--primary-color 将被覆盖。这使您可以轻松地在不同的配色方案（例如浅色模式和深色模式）之间切换。
5.在媒体查询中使用变量
css 变量与媒体查询配合得很好，允许您根据屏幕尺寸调整值。
示例：
:root {
--font-size: 16px;
}
@media (max-width: 600px) {
:root {
--font-size: 14px;
}
}
body {
font-size: var(--font-size);
}
在此示例中，--font-size 变量在较小的屏幕上减小，使文本在移动设备上更具可读性。
6. css 变量中的后备值
您可以为 css 变量提供后备值，以防浏览器未定义或支持该变量。
示例：
body {
font-size: var(--font-size, 18px);
}
这里，如果没有定义--font-size，浏览器将默认为18px。
7.变量和 javascript
css 变量最强大的方面之一是它们可以使用 javascript 进行操作，允许您创建动态的交互式样式。
示例：
document.documentElement.style.setProperty('--primary-color', '#e74c3c');
在此示例中，使用 javascript 将 --primary-color 变量更新为新颜色 (#e74c3c)，这会动态更改页面的样式。
8.实际用例
- 主题：使用 css 变量为您的网站创建浅色和深色主题。
- 设计系统：通过使用颜色、间距和排版变量构建一致的设计系统。
- 动态交互：创建交互式元素，使用 css 变量和 javascript 实时更新其样式。
结论
css 变量提供了一种灵活的方式来管理样式、提高代码可维护性并启用动态更新。通过将 css 变量合并到您的工作流程中，您可以简化您的开发流程并创建更易于维护、可扩展的样式表。
在 linkedin 上关注我
里多伊·哈桑
