CSS3原生变量var

2019-09-10 郑州网站建设  

一、变量是个好东西

在任何语言中,变量的有一点作用都是一样的,那就是可以降低维护成本,附带还有更高性能,文件更高压缩率的好处。

随着CSS预编译工具Sass/Less/Stylus的关注和逐渐流行,CSS工作组迅速跟进CSS变量的规范制定,并且,很多浏览器已经跟进,目前,在部分项目中已经可以直接使用了。

CSS变量var兼容性截图

Chrome/Firefox/Safari浏览器都是绿油油的,兼容性大大超出我的预期,于是果断尝鲜记录下语法用法和特性。

二、CSS变量var()语法和用法和特性

CSS中原生的变量定义语法是:--*,变量使用语法是:var(--*),其中*表示我们的变量名称。关于命名这个东西,各种语言都有些显示,例如CSS选择器不能是数字开头,JS中的变量是不能直接数值的,但是,在CSS变量中,这些限制通通没有,例如:

:root { --1: #369; } body { background-color: var(--1); }

结果背景色如下:

变量背景色示意

但是,不能包含$,[,^,(,%等字符,普通字符局限在只要是“数字[0-9]”“字母[a-zA-Z]”“下划线_”和“短横线-”这些组合,但是可以是中文,日文或者韩文,例如:

body { --深蓝: #369; background-color: var(--深蓝); }

所以,我们就可以直接使用中文名称作为变量,即使英语4级没过的小伙伴也不会有压力了,我们也不需要随时挂个翻译器在身边了。

无论是变量的定义和使用只能在声明块{}里面,例如,下面这样是无效的:

--深蓝: #369; body { background-color: var(--深蓝); }

变量的定义,或者说声明跟CSS计数器的声明类似的,你需要摆脱Sass/Less等预编译工具语法先入为主的语法影响,把CSS的原生变量理解为一种CSS属性。

这样,你就对其权重和变量应用规则要容易理解地多。

例如下面这个例子:

:root { --color: purple; } div { --color: green; } #alert { --color: red; } * { color: var(--color); } <p>我的紫色继承于根元素</p> <div>我的绿色来自直接设置</div> <div> ID选择器权重更高,因此阿拉是红色! <p>我也是红色,占了继承的光</p> </div>

上面这个例子我们可以获得这些信息:

变量也是跟着CSS选择器走的,如果变量所在的选择器和使用变量的元素没有交集,是没有效果的。例如#alert定义的变量,只有id为alert的元素才能享有。如果你想变量全局使用,则你可以设置在:root选择器上;

当存在多个同样名称的变量时候,变量的覆盖规则由CSS选择器的权重决定的,但并无!important这种用法,因为没有必要,!important设计初衷是干掉JS的style设置,但对于变量的定义则没有这样的需求。

CSS属性名可以走变量吗?

类似下面这样:

body { --bc: background-color; var(--bc): #369; }

答案是“不可以”,要是可以支持的话,那CSS的压缩可就要逆天了,估计所有的属性都会变成1~2个字符。

CSS变量支持同时多个声明吗?

类似下面这样:

不好意思,类似不了,语法上就根本不支持。

CSS变量使用完整语法
CSS变量使用的完整语法为:var( [, ]? ),用中文表示就是:var( <自定义属性名> [, <默认值 ]? ),

意思就是,如果我们使用的变量没有定义(注意,仅限于没有定义),则使用后面的值作为元素的属性值。举个例子:

.box { --1: #369; } body { background-color: var(--1, #cd0000); }

则此时的背景色是#cd0000:

红色背景色

CSS变量不合法的缺省特性

请看下面这个例子:

body { --color: 20px; background-color: #369; background-color: var(--color, #cd0000); }

请问,此时<body>的背景色是?

A. transparent B. 20px C. #369 D. #cd0000

答案是…………………………A. transparent

不知大家答对了没有!


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1757.html转载请标明出处,谢谢合作!
标签:
  • CSS3var
  • 变量
  • 任何
  • 东西