在5分钟内学习CSS变量
CSS Custom Properties(也称为Variables)是前端开发人员的一大胜利。它为CSS带来了变量的强大功能,从而减少了重复次数,提高了可读性并增加了灵活性。
另外,与CSS预处理器的变量不同,CSS变量实际上是DOM的一部分,它有很多好处。所以它们基本上就像类固醇上的SASS和LESS变量一样。在本文中,我将为您提供有关这项新技术如何运作的速成价格。
我还创建了一个关于CSS变量的免费互动式8部分价格,如果你想成为这个主题的专家,请查看它。
想学习CSS变量吗?这是我免费的8部分价格
为什么要学习CSS变量?
在CSS中使用变量有很多原因。其中最引人注目的是它减少了样式表中的重复。
在上面的例子中,为它创建一个变量要好得多 #ffeead
颜色比重复它,就像我们在这里做的那样:
这不仅可以使您的代码更易于阅读,而且还可以为您提供更大的灵活性,以防您想要更改此颜色。
现在,多年来SASS和LESS变量确实可以实现。但是,CSS变量有一些很大的好处。
- 它们不需要任何转换工作,因为它们是浏览器的本机。因此,您不需要任何设置即可开始,就像使用SASS和LESS一样。
- 他们生活在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上关注我。