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

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中使用变量有很多原因。 其中最引人注目的就是它减少了样式表中的重复。

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

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

现在,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颜色:

声明局部变量

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

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

.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')

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

浏览器支持

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

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

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

原文:Learn CSS Variables in 5 minutes

版权声明:著作权归作者所有。

相关推荐

GPU架构学习资源

这里收藏了gpu学习的网站,pdf等等资源:http://courses.cms.caltech.edu/cs179/http://www.amd.com/Documents/GCN_Architecture_whitepaper.pdfhttps://community.arm.com/graphics/b/bloghttp://cdn.imgtec.com/sdk-documentation/

[译]CSS变量实现酷炫的悬停效果

我最近受Grover网站上有趣悬停动画的启发。 将鼠标移动到订阅按钮上可以显示光标移动后的彩色渐变。 这个想法很简单,但效果是按钮会脱颖而出,并得到点击。我们怎样才能达到类似的效果,让我们的网站脱颖而出呢? 其实,它不像你想象的那么难!跟踪位置我们首先要获取鼠标的位置。document.querySelector('.button').onmousemove 

如何使用CSS变量让响应式变得超级简单

本文是关于如何在2018年创建响应式网站的快速教程。如果你之前没有听说过CSS变量,它就是CSS的新增功能,它让你可以在样式里使用变量的功能,而无需进行任何设置。实质上,CSS变量允许你跳过设置样式的旧方式:h1 {   font-size: 30px; } navbar > a {   font-si

Html5使用CSS修改输入框的placeholder颜色

这里需要使用伪元素的方式对input的placeholder设置样式,且不同的浏览器伪元素不一样。兼容多个浏览器的方法:::-webkit-input-placeholder { /* WebKit, Blink, Edge */     color:    

[译]Angular 5:升级和新功能的总结

代号为pentagonal-donut的Angular 5刚刚发布,它带来了一些新功能以及一些内部变化,这些会让Angular应用变得更小,执行变得更快。 在这篇文章中,我们将简要介绍一些最重要的变化以及升级指南。 有关更多详细信息,请参阅公告博客帖子,有关所有更改的详细信息,请参阅官方更新日志。性能这是Angular 5包含的一些改变,它会让你的应用变得更