[译]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