CSS函数之var()

CSS变量

作用：var()函数用于插入CSS变量的值。

CSS变量可以访问DOM，这意味着可以创建具有局部或全局范围的变量，使用JavaScript更改变量，以及基于媒体查询来更改变量。

使用CSS变量的一种好方法是涉及设计的颜色。可以将它们放在变量中，而不必一遍又一遍地复制和粘贴相同的颜色。

 

var（）函数的语法

var( )函数语法如下：

var(name, value)

Value	Description
name	必须. 必须以双破折号开头（--）
value	非必选. 用于未设定值时，返回的默认值

注意：变量名必须以两个破折号（-）开头，并且区分大小写！

 

新方法-var（）如何工作

首先：CSS变量可以具有全局或局部作用域。

全局变量可以在整个文档中访问/使用，而局部变量只能在声明它的选择器内部使用。

要创建具有全局作用域的变量，请在:root 选择器中声明它。

要创建具有局部作用域的变量，请在将要使用它的选择器中声明它。

下面的示例，在这里我们使用var()函数定义css变量var。

首先，我们声明两个全局变量（--blue和--white）。然后，我们使用该var()函数稍后在样式表中插入变量的值：

   例子1

使用var（）的优点是：

• 使代码更易于阅读（更易于理解）
• 使更改颜色值更加容易

要将蓝色和白色更改为较柔和的蓝色和白色，只需要更改两个变量值。

 

用局部变量覆盖全局变量

从上面介绍我们了解到，可以在整个文档中访问/使用全局变量，而局部变量只能在声明它的选择器内部使用。

例子2

使用JavaScript更改变量

CSS变量可以访问DOM，这意味着可以使用JavaScript进行更改。

这是一个示例，该示例说明如何创建脚本来显示和更改 例子2 中使用的示例中的--blue变量。

例子3

 

在媒体查询中使用变量

现在，我们想在媒体查询中更改变量值。

在这里，我们首先在 .container中声名--fontsize --red的新局部变量。我们将其值设置为25px red。然后，我们在.container更下层的类中使用它 。然后，我们创建一条 @media规则，指出“当浏览器的宽度为1500px或更宽时，将类的--fontsize变量值更改 .container为50px color更改为 lightcoral

例子4

实际项目中的应用

在树形结构中根据节点层级，显示左边的竖线

例子5

类似的css函数 attr()

仅可用于 :after :before 伪元素的content中例如：

css函数之attr()