CSS 变量（也称为自定义属性）是一种强大的工具，可以使前端开发人员更加灵活地管理和修改样式。本文将为您介绍 CSS 变量的基础知识、用法及实现方法，并提供示例代码，帮助您快速掌握 CSS 变量的使用。
基础知识
CSS 变量是在 CSS 中声明并赋值的变量，它们以 "--" 开头，例如：--primary-color: #007bff;。声明后，可以在 CSS 中通过 var() 函数调用这些变量，例如：color: var(--primary-color);。CSS 变量遵循作用域规则，如果在子元素中声明了同名的变量，则该变量只在该元素中生效。
用法
使用 CSS 变量可以带来许多好处，比如：
- 更加灵活的主题切换
- 简化样式表的管理和维护
- 动态改变样式，增强交互性
下面是一个简单的示例，展示了如何使用 CSS 变量创建一个具有可切换主题功能的网站：
<button id="light-theme">Light Theme</button> <button id="dark-theme">Dark Theme</button> <div class="card"> <h1>Card Title</h1> <p>Card content goes here.</p> </div>
-- -------------------- ---- ------- ----- - ---------------- -------- - ----- - ------- --- ----- --------------------- - ------------ - ----------------- ------ ------ --------------------- - ----------- - ----------------- --------------------- ------ ------ - ------------------ ------------------ - ------- -------- -
在上面的示例中，我们声明了一个名为 --primary-color 的 CSS 变量，并将其用于 .card 元素的边框和两个按钮的颜色。当点击 "Light Theme" 按钮时，页面背景变为白色，字体颜色为 --primary-color 所代表的颜色；当点击 "Dark Theme" 按钮时，则相反。
实现方法
CSS 变量是通过 var() 函数来调用的，该函数接受一个参数，即变量名称。例如：color: var(--primary-color);。如果没有为变量指定默认值，将使用 initial 值作为默认值。
要在 CSS 中声明变量，需要使用 :root 伪类选择器，在根元素中声明变量。例如：
:root {
--primary-color: #007bff;
}在其他元素中声明变量也可行，但只有在该元素及其子元素中生效。例如：
.card {
--primary-color: #007bff;
border: 1px solid var(--primary-color);
}总结
CSS 变量是一种非常有用的工具，可以使前端开发人员更加灵活地管理和修改样式。通过将变量声明在根元素中，可以实现全局共享，并且使用 var() 函数调用变量非常方便。使用 CSS 变量可以简化样式表的管理和维护，增强交互性，提高用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/7586