这是一个令人激动的革新。
CSS 变量,顾名思义,也就是由网页的作者或用户定义的实体,用来指定文档中的特定变量。
更准确的说法,应该称之为 CSS 自定义属性 ,不过下文为了好理解都称之为 CSS 变量。
一直以来我们都知道,CSS 中是没有变量而言的,要使用 CSS 变量,只能借助 SASS 或者 LESS 这类预编译器。
但是新的草案发布之后,直接在 CSS 中定义和使用变量已经不再是幻想了,像下面这样,看个简单的例子:
// 声明一个变量: :root{ --bgColor:#000; }
这里我们借助了上篇文章
结构性伪类
中的:root{ }
伪类,在全局:root{ }
伪类中定义了一个 CSS 变量,取名为--bgColor
。
定义完了之后则是使用,假设我要设置一个 div 的背景色为黑色:
.main{ background:var(--bgColor); }
这里,我们在需要使用之前定义变量的地方,通过 var(定义的变量名)
来调用。
如若转载,请注明出处:https://www.javaidea.cn/article/7760.html