CSS变量
作用:var()
函数用于插入CSS变量的值。
CSS变量可以访问DOM,这意味着可以创建具有局部或全局范围的变量,使用JavaScript更改变量,以及基于媒体查询来更改变量。
使用CSS变量的一种好方法是涉及设计的颜色。可以将它们放在变量中,而不必一遍又一遍地复制和粘贴相同的颜色。
var()函数的语法
var( )函数语法如下:
Value | Description |
---|---|
name | 必须. 必须以双破折号开头(--) |
value | 非必选. 用于未设定值时,返回的默认值 |
注意:变量名必须以两个破折号(-)开头,并且区分大小写!
新方法-var()如何工作
首先:CSS变量可以具有全局或局部作用域。
全局变量可以在整个文档中访问/使用,而局部变量只能在声明它的选择器内部使用。
要创建具有全局作用域的变量,请在:root
选择器中声明它。
要创建具有局部作用域的变量,请在将要使用它的选择器中声明它。
下面的示例,在这里我们使用var()
函数定义css变量var。
首先,我们声明两个全局变量(--blue和--white)。然后,我们使用该var()
函数稍后在样式表中插入变量的值:
使用var()的优点是:
- 使代码更易于阅读(更易于理解)
- 使更改颜色值更加容易
要将蓝色和白色更改为较柔和的蓝色和白色,只需要更改两个变量值。
用局部变量覆盖全局变量
从上面介绍我们了解到,可以在整个文档中访问/使用全局变量,而局部变量只能在声明它的选择器内部使用。
使用JavaScript更改变量
CSS变量可以访问DOM,这意味着可以使用JavaScript进行更改。
这是一个示例,该示例说明如何创建脚本来显示和更改 例子2 中使用的示例中的--blue变量。
在媒体查询中使用变量
现在,我们想在媒体查询中更改变量值。
在这里,我们首先在 .container中
声名--fontsize --red的新局部变量。我们将其值设置为25px red。然后,我们在.container
更下层的类中使用它 。然后,我们创建一条 @media
规则,指出“当浏览器的宽度为1500px或更宽时,将类的--fontsize变量值更改 .container
为50px color更改为 lightcoral
实际项目中的应用
在树形结构中根据节点层级,显示左边的竖线
类似的css函数 attr()
仅可用于 :after :before 伪元素的content中例如: