css全局变量定义方法很简单,其实就是在根元素上先定义声明,下面这篇文章主要给大家介绍了关于如何通过一篇文章带你学会css变量的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
CSS 变量 这个是 CSS 新功能,2017年3月,微软宣布 Edge 浏览器将支持 CSS 变量,所有主要浏览器已经都支持了。
css 变量语法
变量的声明
声明变量的时候,变量名前面要加两根连词线(--
)
1 2 3 4 5 |
|
例如上面我们申明了2个变量:--foo
和--bar
,其实你只需要把它们理解成css自定义属性看待,它们与color
、font-size
等正式属性没有什么不同,只是没有默认含义,注意css变量名称是区分大小写的,通常我们写的css是不区分。
你可能会问,为什么选择两根连词线(--
)表示变量?因为$foo
被 Sass 用掉了,@foo
被 Less 用掉了。为了不产生冲突,官方的 CSS 变量就改用两根连词线了。
各种值都可以放入 CSS 变量。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
1 2 3 4 5 6 7 |
|
再次提醒:可以把css变量理解成css自定义属性看待,它们与
color
、font-size
等正式属性没有什么不同,只是没有默认含义
变量名大小写敏感,--header-color
和--Header-Color
是两个不同变量。
命名规范
关于命名这个东西,各种语言都有些显示,例如CSS选择器不能是数字开头,JS中的变量是不能直接数值的,但是,在CSS变量中,这些限制通通没有,如:
1 2 3 4 5 6 |
|
不能包含$
,[
,^
,(
,%
等字符,普通字符局限在只要是“数字[0-9]”“字母[a-zA-Z]”“下划线_”和“短横线-”这些组合,但是可以是中文,日文或者韩文,例如:
1 2 3 4 |
|
全局变量:root
伪类可以看做是一个全局作用域,在里面声明的变量,页面下面的所有选择器都可以拿到变量
1 2 3 4 5 6 |
|
局部变量
1 2 3 4 5 6 |
|
变量作用域同一个 CSS 变量,可以在多个选择器内声明。读取的时候,优先级最高的声明生效。这与 CSS 的"层叠"(cascade)规则是一致的
1 2 3 4 5 6 7 8 9 10 |
|
这就是说,变量的作用域就是它所在的选择器的有效范围。
变量的获取
var()
函数用于读取变量。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
变量设置默认值var()
函数还可以使用第二个参数,表示变量的默认值。如果该变量不存在,就会使用这个默认值。
1 |
|
第二个参数不处理内部的逗号或空格,都视作参数的一部分。
1 2 |
|
变量引用var()
函数还可以用在变量的声明。
1 2 3 4 |
|
注意,变量值只能用作属性值,不能用作属性名
1 2 3 4 5 |
|
上面代码中,变量–side
用作属性名,这是无效的
变量值的类型
如果变量值是一个字符串,可以与其他字符串拼接。
1 2 |
|
如果变量值是数值,不能与数值单位直接连用。
1 2 3 4 5 |
|
数值与单位直接写在一起,这是无效的。必须使用calc()函数,将它们连接。
1 2 3 4 |
|