[译]5分钟内学习CSS变量

时间：2021-10-21 16:39:23

CSS自定义属性（也称为变量）对于前端开发人员来说是一个巨大的胜利。 它将变量的强大功能引入CSS，从而减少重复，代码更可读以及更灵活。

另外，与CSS预处理器的变量不同，CSS变量实际上是DOM的一部分，它是有很多好处。 所以他们基本上像SASS和LESS的变量。 在这篇文章中，我会给你一个关于这种新技术如何工作的速成课程。

我还创建了一个免费的关于CSS变量的课程，它由8节交互的课程构成。如果你想成为这个主题的专家，请打开：https://medium.freecodecamp.org/want-to-learn-css-variables-heres-my-free-8-part-course-f2ff452e5140。

为什么学习CSS变量？

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

[译]5分钟内学习CSS变量

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

[译]5分钟内学习CSS变量

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

现在，SASS和LESS变量确实可以使用多年。 但是，CSS变量有一些很大的好处。

  1. 它们不需要任何转译工作，因为他们原生浏览器。 所以你不需要任何设置就可以开始，就像你使用SASS和LESS一样。
  2. 它们内置在DOM中，这为我带来了很多好处，我将在本文和即将到来的课程中介绍这些好处。

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

声明你的第一个CSS变量

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

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

:root {
  --main-color: #ff6f69;
}

正如你所看到的，你可以像设置任何CSS属性一样声明一个变量。 但是，该变量必须以两个破折号开头。

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

#title {
  color: var(--main-color);
}

这会给你的标题＃f6f69颜色：

[译]5分钟内学习CSS变量

声明局部变量

你也可以创建局部变量，这些局部变量只能对其声明的元素及其子元素访问。 如果知道某个变量仅用于应用程序的特定部分（或多个部分），则这是有意义的。

例如，你可能有一个警告框，它使用了一种特殊的颜色，这些颜色不会在应用中的其他地方使用。 在这种情况下，避免将其置于全局范围内是有道理的：

.alert {
  --alert-color: #ff6f69;
}

这个变量现在可以被其子元素使用：

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

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

使用变量更容易响应

CSS变量的一大优点是他们可以访问DOM。 对于LESS或SASS，情况并非如此，因为它们的变量被编译为常规CSS。

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

:root {
  --main-font-size: 16px;
}
media all and (max-width: 600px) {
  :root {
    --main-font-size: 12px;
  }
}

通过这些简单的四行代码，你可以在小屏幕上查看整个应用程序的主字体大小。 很优雅，是吧？

如何使用JavaScript访问变量

内置在DOM中的另一个优点是，你可以使用JavaScript访问变量，甚至可以更新它们，例如基于使用的交互。 如果你想让用户能够更改网站（如调整字体大小），这非常完美。

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

var root = document.querySelector(':root');
var rootStyles = getComputedStyle(root);
var mainColor = rootStyles.getPropertyValue('--main-color');
console.log(mainColor); 
--> '#ffeead'

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

root.style.setProperty('--main-color', '#88d8b0')

这种主色可以改变你的应用程序的整个外观，它是允许用户设置网站的主题。

[译]5分钟内学习CSS变量

浏览器支持

目前，77％的全球网站流量支持CSS变量，美国接近90％。 我们已经在Scrimba.com上使用CSS Variables一段时间了，因为我们的观众非常熟悉技术，并且大多使用现代浏览器。

[译]5分钟内学习CSS变量

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

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

原文：Learn CSS Variables in 5 minutes

标签：

相关文章