【译】CSS Variables 快速上手

关于如何快速开始的教程

CSS 自定义属性(也称之为变量)对于前端开发人员来说是一个制胜点。为 CSS 中引入了变量,算是为 CSS 赋予了新的力量,如此一来可以让代码变得更加简洁、灵活。

另外,CSS 原生的变量属于 DOM 的一部分,和预处理器中的不同,相比之下带来了更多的好处。所以更像是 SASS 和 LESS 中的类里的变量。在这篇文章中,我将带你快速学习这项新技术。

为什么要用 CSS 变量

有很多理由让你在 CSS 中使用变量,其中最引人注目的一点就是减少你样式文件中的重复代码。(单纯的描述性语言中,难免会有很多重复)

1
2
3
4
5
6
7
8
/* The old way */
#title {
color: #ff6f69;
}

.quote {
color: #ff6f69;
}

在上面的例子中,我们可以通过创建一个变量,比单纯的去重复书写要好一些,就像我们的如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
/* The new way */
:root {
--red: #ff6f69;
}

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

.quote {
color: var(--red);
}

这样做不仅仅使你的代码更容易阅读,而且在你要更改色值的时候也提供了更多的灵活性。

如今 SASS 和 LESS 变量确实可以继续使用下去,但是,CSS 变量有一些很大的好处。

  1. 它们不需要任务转移工作,因为是浏览器原生属性。所以你不需要做任何设置就可以开始使用,就像你使用 SASS 和 LESS 一样。
  2. 它们属于 DOM,从而带来了很多好处,我们加来本文和后续的课程中介绍这些。

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

声明你的第一个 CSS 变量

要声明一个变量,首先需要确定变量存在的范围。如果作为全局变量使用它,就要在 :root 这个伪类上声明。这样就能匹配到文档树中的根元素(通常是 <html> 标签)

随着变量被继承,整个 web 项目中的变量都可以用,因为所有的 DOM 元素都是 <html> 标签的后代元素。

1
2
3
:root {
--red: #ff6f69;
}

正如你所看到的,你可以像设置任何一个 CSS 属性那样去声明一个变量,变量名称必须以两个连接符开始。

要访问到变量,需要使用 var() 函数,并将变量名作为参数传入,如下:

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

声明一个局部变量

当然了,也可以声明一个局部变量,这些局部变量只能对其声明的元素及其它的子元素访问。如果知道某个变量仅用于应用程序的特定部分(或多个部分),则这是有意义的。

例如,你可能有一个 alert box 它用到了某个特殊的色值,这个色值不会在项目中其余的地方使用。在这种情况下,避免将其定义为全局变量是有道理的:

1
2
3
.alert {
--alert-color: #ff6f69;
}

这种变量只能用在它的子元素上:

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

如果你尝试将这个局部变量在程序的其他地方使用,比如用在 navbar 上没有任何作用。浏览器会活忽略这行 CSS 代码。

通过变量更容易相应

CSS 变量的一大优点是它可以访问 DOM。而对于 LESS、SASS,情况并非如此,它们的变量被便宜为常规的 CSS 代码。

在实践中,你可以像下面的例子这样,修改基于屏幕宽度的变量:

1
2
3
4
5
6
7
8
9
:root {
--main-font-size: 16px;
}

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

通过这几行简单的代码,你可以为整个应用在小屏幕上做好字体的适配。这样的处理方式是不是很优雅?

通过 JavaScript 访问 CSS 变量

使用 DOM 内部的属性的另一个优点就是你可以通过 JavaScript 访问、更新变量便于交互。如果你想让你的用户能够更改你的网站(比如调整字体大小),这非常合适。

让我们继续本文开始的例子。在 JavaScript 中拿到 CSS 变量只需要如下 3 行代码。

1
2
3
4
5
6
var root = document.querySelector(':root');
var rootStyles = getComputedStyle(root);
var mainColor = rootStyles.getPropertyValue('--main-color');

console.log(mainColor);
--> '#ffeead'

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

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

这种主色可以改变你的应用程序的外观,所以它是允许用户设置你的网站的主题的最佳途径。

浏览器支持情况

目前全球 77% 的网站支持 CSS 变量,美国接近 90%。我们已经在 Scrimba.com 上使用 CSS 变量有一段时间了,因为我们的观众大都精通技术,而且大多数都是用现代浏览器。

Can I use CSS Variables (Custom Properties)

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

如果你想好好的学习一番,请务必在 Scrimba 上查看我的免费 CSS Variables 课程。

致谢

原作地址 - Learn CSS Variables in 5 minutes