5分钟学会CSS变量

2025-06-10

5分钟学会CSS变量

CSS 自定义属性（也称为变量）对前端开发人员来说是一个巨大的优势。它为 CSS 带来了变量的强大功能，从而减少了重复，提高了可读性和灵活性。

另外，与 CSS 预处理器中的变量不同，CSS 变量实际上是 DOM 的一部分，这有很多好处。所以它们本质上就像是强化版的 SASS 和 LESS 变量。在本文中，我将为你速成讲解这项新技术的工作原理。

我还创建了一个关于 CSS 变量的免费交互式 8 部分课程，如果您想成为该主题的专家，请查看。

想学习 CSS 变量吗？这里有我的免费 8 部分课程！

为什么要学习 CSS 变量？

在 CSS 中使用变量有很多原因。其中最引人注目的一个原因是它可以减少样式表中的重复。

在上面的例子中，为#ffeead颜色创建一个变量比像我们在这里所做的那样重复它要好得多：

这不仅会使您的代码更易于阅读，而且还为您提供了更大的灵活性，以防您想要更改此颜色。

多年来，SASS 和 LESS 变量确实已经实现了这一点。然而，CSS 变量还有一些更大的好处。

  1. 它们无需任何转译即可运行，因为它们是浏览器原生的。因此，您无需像使用 SASS 和 LESS 那样进行任何设置即可开始使用。
  2. 它们存在于 DOM 中，这带来了很多好处，我将在本文和即将开设的课程中对此进行介绍。

现在让我们开始学习 CSS 变量！

声明你的第一个 CSS 变量

要声明一个变量，首先需要确定它应该存在于哪个作用域中。如果希望它全局可用，只需在 :root伪类中定义它即可。它与文档树中的根元素（通常是<html>标签）匹配。

由于变量是继承的，这将使您的变量在整个应用程序中可用，因为所有 DOM 元素都是<html>标签的后代。

:root {  
  --main-color: #ff6f69;  
}
Enter fullscreen mode Exit fullscreen mode

如您所见，声明变量的方式与设置任何 CSS 属性的方式相同。但是，变量必须以两个短划线开头。

要访问变量，您需要使用var()函数，并将变量的名称作为参数传入。

#title {  
  color: var(--main-color);  
}
Enter fullscreen mode Exit fullscreen mode

这将赋予你的标题颜色#f6f69：

声明局部变量

您还可以创建局部变量，这些变量只能由声明它的元素及其子元素访问。如果您知道某个变量只会在应用程序的特定部分（或多个部分）使用，那么这样做很有意义。

例如，你可能有一个警告框，它使用了一种特殊的颜色，而这种颜色在应用程序中的其他地方没有使用。在这种情况下，避免将其放置在全局范围内可能是有意义的：

.alert {  
  --alert-color: #ff6f69;  
}
Enter fullscreen mode Exit fullscreen mode

这个变量现在可以被它的子变量使用：

.alert p {  
  color: var(--alert-color);  
  border: 1px solid var(--alert-color);  
}
Enter fullscreen mode Exit fullscreen mode

如果你尝试alert-color在应用程序的其他地方使用该变量，例如在导航栏中，它根本不起作用。浏览器会忽略该行 CSS。

使用变量更容易响应

CSS 变量的一大优势是它们可以访问 DOM。LESS 或 SASS 则不然，因为它们的变量会被编译成常规 CSS。

实际上，这意味着您可以根据屏幕宽度更改变量：

:root {  
  --main-font-size: 16px;  
}

media all and (max-width: 600px) {  
  :root {  
    --main-font-size: 12px;  
  }  
}
Enter fullscreen mode Exit fullscreen mode

只需这四行简单的代码，你就更新了整个应用在小屏幕上的主字体大小。是不是非常优雅？

如何使用 JavaScript 访问变量

DOM 的另一个优势是，你可以用 JavaScript 访问变量，甚至可以根据用户交互等方式更新它们。如果你想让用户能够更改你的网站（例如调整字体大小），那么 DOM 就非常适合你。

我们继续本文开头的例子。在 JavaScript 中获取 CSS 变量只需三行代码。

var root = document.querySelector(':root');  
var rootStyles = getComputedStyle(root);  
var mainColor = rootStyles.getPropertyValue('--main-color');

console.log(mainColor);   
\--> '#ffeead'
Enter fullscreen mode Exit fullscreen mode

要更新 CSS 变量，只需setProperty在已声明变量的元素上调用方法，并将变量名作为第一个参数传入，将新值作为第二个参数传入。

root.style.setProperty('--main-color', '#88d8b0')
Enter fullscreen mode Exit fullscreen mode

这种主色可以改变应用程序的整体外观，因此非常适合允许用户设置网站的主题。

通过更新单个变量，您可以更改导航栏、文本和项目的颜色。
通过更新单个变量，您可以更改导航栏、文本和项目的颜色。

浏览器支持

目前，全球 77% 的网站流量支持 CSS 变量，其中美国的比例接近 90%。Scrimba.com 已经使用 CSS 变量一段时间了，因为我们的用户都比较精通技术，而且大多使用现代浏览器。

好了，就是这样。希望你学到了一些东西！

如果您想正确学习它，请务必查看我在 Scrimba 上的免费 CSS 变量课程。

感谢阅读！我叫 Per，是Scrimba的联合创始人，我热爱帮助人们学习新技能。如果您想及时收到新文章和资源的通知，请在Twitter上关注我。

鏂囩珷鏉ユ簮锛�https://dev.to/scrimba/learn-css-variables-in-5-minutes-4ee3
Devto 翻译
PREV
学习如何编写神经网络代码
NEXT
如何使用 CSS Grid 重新创建 Medium 的文章布局