CSS 变量 – 简化您的样式表

第 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 上关注我

里多伊·哈桑