CSS变量介绍(CSS Variable)

这是一个令人激动的革新。

CSS 变量,顾名思义,也就是由网页的作者或用户定义的实体,用来指定文档中的特定变量。

更准确的说法,应该称之为 CSS 自定义属性 ,不过下文为了好理解都称之为 CSS 变量。

一直以来我们都知道,CSS 中是没有变量而言的,要使用 CSS 变量,只能借助 SASS 或者 LESS 这类预编译器。

但是新的草案发布之后,直接在 CSS 中定义和使用变量已经不再是幻想了,像下面这样,看个简单的例子:

// 声明一个变量:
:root{
  --bgColor:#000;
}

这里我们借助了上篇文章 结构性伪类 中的 :root{ } 伪类,在全局 :root{ } 伪类中定义了一个 CSS 变量,取名为 --bgColor 。

定义完了之后则是使用,假设我要设置一个 div 的背景色为黑色:

.main{
  background:var(--bgColor);
}

这里,我们在需要使用之前定义变量的地方,通过 var(定义的变量名) 来调用。

Demo戳我 — CSS 变量简单示例

如若转载,请注明出处:https://www.javaidea.cn/article/7760.html

(0)
上一篇 2022年2月7日 上午10:03
下一篇 2022年2月7日 上午10:03

相关推荐

发表评论

您的电子邮箱地址不会被公开。