CSS 变量 - var() 函数

CSS 变量

这个var()函数用于插入 CSS 变量的值。

CSS 变量可以访问 DOM，这意味着您可以创建具有本地或全局作用域的变量、使用 JavaScript 更改变量以及基于媒体查询更改变量。

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

传统方式

以下示例显示了在样式表中定义某些颜色的传统方法（通过为每个特定元素定义要使用的颜色）：

示例

body { background-color: #1e90ff; }

h2 { border-bottom: 2px solid #1e90ff; }

.container {
color: #1e90ff;
background-color: #ffffff;
padding: 15px;
}

button {
background-color: #ffffff;
color: #1e90ff;
border: 1px solid #1e90ff;
padding: 5px;
}

亲自试一试 »

var() 函数的语法

这个var()函数用于插入 CSS 变量的值。

的语法var()函数如下：

var(-- name, value)

Value	Description
name	Required. The variable name (must start with two dashes)
value	Optional. The fallback value (used if the variable is not found)

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

var() 的工作原理

首先：CSS 变量可以具有全局或局部范围。

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

要创建具有全局作用域的变量，请在:root选择器。这:root选择器匹配文档的根元素。

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

下面的例子与上面的例子相同，但是这里我们使用var()函数。

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

示例

:root {
--blue: #1e90ff;
--white: #ffffff;
}

body { background-color: var(--blue); }

h2 { border-bottom: 2px solid var(--blue); }

.container {
color: var(--blue);
background-color: var(--white);
padding: 15px;
}

button {
background-color: var(--white);
color: var(--blue);
border: 1px solid var(--blue);
padding: 5px;
}

亲自试一试 »

使用 var() 的优点是：

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

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

示例

:root {
--blue: #6495ed;
--white: #faf0e6;
}

body { background-color: var(--blue); }

h2 { border-bottom: 2px solid var(--blue); }

.container {
color: var(--blue);
background-color: var(--white);
padding: 15px;
}

button {
background-color: var(--white);
color: var(--blue);
border: 1px solid var(--blue);
padding: 5px;
}

亲自试一试 »

浏览器支持

表中的数字指定第一个完全支持的浏览器版本var()函数

Function
var()	49.0	15.0	31.0	9.1	36.0

CSS var() 函数

Property	Description
var()	Inserts the value of a CSS variable