HTML CSS 变量

介绍

CSS 变量（也称为自定义属性）是 CSS 中一种强大的功能，允许你在样式表中定义可重用的值。通过使用 CSS 变量，你可以轻松地在整个项目中维护一致的样式，并在需要时快速调整设计。

CSS 变量的语法非常简单，以 -- 开头，并通过 var() 函数来引用。它们的作用域可以是全局的或局部的，具体取决于你在哪里定义它们。

定义 CSS 变量

CSS 变量通常在 :root 伪类中定义，这样它们就可以在整个文档中使用。你也可以在其他选择器中定义变量，使其仅在该选择器及其子元素中生效。

css
:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --font-size: 16px;
}

在上面的例子中，我们定义了三个 CSS 变量：--primary-color、--secondary-color 和 --font-size。这些变量可以在整个样式表中使用。

使用 CSS 变量

要使用 CSS 变量，你可以使用 var() 函数。这个函数接受变量名作为参数，并返回该变量的值。

css
body {
  background-color: var(--primary-color);
  font-size: var(--font-size);
}

button {
  background-color: var(--secondary-color);
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
}

在这个例子中，body 的背景颜色和字体大小分别使用了 --primary-color 和 --font-size 变量。button 的背景颜色则使用了 --secondary-color 变量。

变量的作用域

CSS 变量的作用域取决于它们在哪里定义。在 :root 中定义的变量是全局的，可以在整个文档中使用。而在特定选择器中定义的变量则只在该选择器及其子元素中生效。

css
:root {
  --global-color: #3498db;
}

.container {
  --local-color: #2ecc71;
  background-color: var(--local-color);
}

.container p {
  color: var(--global-color);
}

在这个例子中，--global-color 是全局变量，可以在任何地方使用。而 --local-color 是局部变量，只能在 .container 及其子元素中使用。

实际应用场景

主题切换

CSS 变量非常适合用于实现主题切换功能。你可以定义一组变量来表示不同的主题颜色，然后通过 JavaScript 动态切换这些变量的值。

css
:root {
  --background-color: white;
  --text-color: black;
}

.dark-theme {
  --background-color: black;
  --text-color: white;
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
}

javascript
const toggleTheme = () => {
  document.body.classList.toggle('dark-theme');
};

在这个例子中，点击按钮时，body 的类名会在 dark-theme 和默认主题之间切换，从而改变页面的背景颜色和文本颜色。

响应式设计

CSS 变量还可以用于响应式设计。你可以根据屏幕宽度动态调整变量的值，从而实现更灵活的布局。

css
:root {
  --padding: 10px;
}

@media (min-width: 768px) {
  :root {
    --padding: 20px;
  }
}

.container {
  padding: var(--padding);
}

在这个例子中，当屏幕宽度大于 768px 时，--padding 变量的值会从 10px 变为 20px，从而调整 .container 的内边距。

总结

CSS 变量是一种强大的工具，可以帮助你更有效地管理样式。通过使用 CSS 变量，你可以减少代码重复，提高代码的可维护性，并轻松实现主题切换和响应式设计等功能。

附加资源与练习

练习 1: 尝试在你的项目中定义一组 CSS 变量，并使用它们来设置页面的颜色和字体大小。
练习 2: 实现一个简单的主题切换功能，使用 CSS 变量来切换页面的背景颜色和文本颜色。
进一步阅读: MDN 文档 - CSS 变量

提示

CSS 变量在现代浏览器中得到了广泛支持，但在使用之前，请确保你的目标浏览器支持这一功能。

介绍​

定义 CSS 变量​

使用 CSS 变量​

变量的作用域​

实际应用场景​

主题切换​

响应式设计​

总结​

附加资源与练习​

介绍