在5分钟内学习CSS变量

CSS Custom Properties(也称为Variables)是前端开发人员的一大胜利。它为CSS带来了变量的强大功能,从而减少了重复次数,提高了可读性并增加了灵活性。

另外,与CSS预处理器的变量不同,CSS变量实际上是DOM的一部分,它有很多好处。所以它们基本上就像类固醇上的SASS和LESS变量一样。在本文中,我将为您提供有关这项新技术如何运作的速成价格。

我还创建了一个关于CSS变量的免费互动式8部分价格,如果你想成为这个主题的专家,请查看它。

想学习CSS变量吗?这是我免费的8部分价格

为什么要学习CSS变量?

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

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

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

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

  1. 它们不需要任何转换工作,因为它们是浏览器的本机。因此,您不需要任何设置即可开始,就像使用SASS和LESS一样。
  2. 他们生活在DOM中,这带来了很多好处,我将在本文和即将开始的价格中介绍。

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

声明你的第一个CSS变量

要声明变量,首先需要确定变量应该存在哪个范围。如果希望全局可用,只需在变量上定义它。 :root 伪类。它匹配文档树中的根元素(通常是 标签)。

随着变量的继承,这将使您的变量在整个应用程序中可用,因为所有DOM元素都是变量的后代 标签。

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

如您所见,您声明一个变量的方式与设置任何CSS属性的方式相同。但是,变量必须以两个达世币开头。

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

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

这将给你的头衔 #f6f69 颜色:

声明一个局部变量

您还可以创建局部变量,这些变量只能在其声明的元素及其子元素中访问。如果您知道变量仅用于应用程序的特定部分(或多个部分),则这是有意义的。

例如,您可能有一个警告框,它使用了一种特殊的颜色,这些颜色未在应用程序的其他位置使用。在这种情况下,避免将其放在全局范围内可能是有意义的:

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

该变量现在可由其子项使用:

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

如果你尝试过使用 alert-color 变量在应用程序的其他位置,例如在导航栏中,它根本不起作用。浏览器只会忽略那一行CSS。

更容易响应变量

CSS Variables的一大优势是它们可以访问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') 

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

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

浏览器支持

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

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

如果你想正确学习它,请务必查看我在Scrimba的免费CSS变量价格。

谢谢阅读我叫Per,我是Scrimba的联合创始人,我喜欢帮助人们学习新技能。如果您想收到有关新文章和资源的通知,请在Twitter上关注我。

资讯来源:由0x资讯编译自DEV,原文:https://dev.to/perborgen/learn-css-variables-in-5-minutes-4ee3 ,版权归作者所有,未经许可,不得转载
你可能还喜欢