CSS 变量 - 绿叶网

CSS 变量是 CSS3 中新增的一项非常有用的功能，它允许我们使用变量来存储值，然后在编写 CSS 时使用这些变量。使用 CSS 变量，可以极大提高代码的可复用性。

CSS 变量语法

CSS 变量使用很简单，首先我们需要在选择器（一般是 :root 选择器）中使用 “--” （双中划线）来定义一个变量，然后在 CSS 样式表中使用 var() 函数来使用该变量。

语法：

/* 第1步：定义变量 */
:root {
    --变量名: 值;
}

/* 第2步：使用变量 */
属性名: var(--变量名);

说明：

在使用 CSS 变量时，必须借助 var() 函数。其中，CSS 变量必须以 “--”（双中划线）开头，以区分普通 CSS 属性。

var() 函数可以接受第 2 个参数，作为回退值。当指定的 CSS 变量未定义时，会使用回退值。比如在 color: var(--primary-color, black); 中，如果 --primary-color 未定义，则 color 属性的值将为 black。

此外，小伙伴们还需要注意以下几点。

CSS 变量的作用域：CSS 变量可以在任何 CSS 选择器中声明，不仅仅是 :root 选择器。不过在 :root 选择器中定义的变量具有全局作用域，可以在整个文档中使用。而在其他选择器中定义的变量，只在该选择器及其后代元素中有效。
CSS 变量的继承：CSS 变量可以被继承。如果一个元素没有定义某个 CSS 变量，那么它会从父元素继承该变量的值。这样可以轻松地为页面或应用程序的不同部分设置不同的主题或样式。
可以在 var() 中使用计算表达式：CSS 变量可以在 var() 函数中使用计算表达式。例如：width: calc(var(--base-size) * 2);。
不能在 “CSS 变量的定义” 时直接使用计算表达式。例如：--total-width: 100px + 200px; 是无效的。

提示: CSS 变量是有作用域的。也就是说，CSS 变量可以在特定的选择器中定义，然后在该选择器及其后代元素中使用。但如果在多个选择器中定义了具有相同名称的变量，那么在最具体的选择器中定义的值将生效。

CSS 变量示例

接下来，我们通过几个简单的例子来讲解 CSS 变量是如何使用的。

示例 1：CSS 变量的基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        :root {
            --primary-color: red;
        }
        .current {
            color: var(--primary-color);
        }
    </style>
</head>
<body>
    <div>绿叶网</div>
    <div class="current">绿叶网</div>
    <div>绿叶网</div>
</body>
</html>

页面效果如下图所示。

CSS 变量示例

分析：

在上面例子中，我们定义了一个名为 “--primary-color” 的 CSS 变量，然后在 .current 这个类中使用了该 CSS 变量。

由于 --primary-color 的值为 red，因此 color: var(--primary-color); 等价于：

color: red;

示例 2：CSS 变量的作用域

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        :root {
            /* 定义全局变量 */
            --primary-color: blue;
        }
        div {
            /* 定义局部变量，会覆盖全局变量 */
            --primary-color: red;
        }
        h1 {
            color: var(--primary-color);    /* 红色 */
        }
        p {
            color: var(--primary-color);    /* 蓝色 */
        }
    </style>
</head>
<body>
    <div>
        <h1>绿叶网</h1>
    </div>
    <p>为好教程，全力以赴。</p>
</body>
</html>

页面效果如下图所示。

CSS 变量的作用域

分析：

在上面例子中，我们在 :root 伪类中定义了一个全局变量 --primary-color，并且在 div 元素中又定义了一个同名的变量，并赋予了不同的值。

由于 div 元素中的变量作用域仅限于 div 元素及其后代元素，因此 div 元素内的 h1 元素使用了 div 元素中定义的变量，字体颜色为 red；而 p 元素使用了全局定义的变量，字体颜色为 blue。

示例 3：CSS 变量的回退值

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        :root {
            /* 定义变量 */
            --primary-color: red;
        }
        h1 {
            /* 使用已定义的变量，并指定回退值 */
            color: var(--primary-color, green);
        }
        p {
            /* 使用未定义的变量，使用回退值 */
            color: var(--secondary-color, blue);
        }
    </style>
</head>
<body>
    <h1>绿叶网</h1>
    <p>为好教程，全力以赴。</p>
</body>
</html>

页面效果如下图所示。

CSS 变量的回退值

分析：

在这个例子中，我们首先在 :root 伪类中定义了一个 CSS 变量：--primary-color。在 h1 元素的样式中，我们使用了该变量并指定了一个回退值 black。由于变量 --primary-color 已定义，因此 h1 元素使用会使用变量的值（red），而不是回退值（green）。

在 p 元素的样式中，我们使用了未定义的变量 --secondary-color，并指定了一个回退值 green。由于变量 --secondary-color 未定义，因此 p 元素会使用回退值（blue）。

CSS 变量的应用场景

CSS 变量非常实用，在实际开发中，我们在很多地方会用到。下面是几个典型的场景：

定义主题颜色（最常用）：主题颜色可以使用 CSS 变量来定义，以便应用于整个应用程序。像常见的亮色主题与暗色主题的切换，都是使用 CSS 变量来实现的。比如：

:root {
    --primary-color: #4cafef;     /* 主题色 */
}
body {
    background-color: var(--primary-color);
}

共享 CSS 代码：如果你在多个项目中想复用相同的样式，可以把常用的颜色、尺寸、字体等定义成 CSS 变量，这样在不同项目中直接引入就能使用，省时省力。
响应式设计：CSS 变量配合媒体查询，可以针对不同尺寸的设备来自动调整样式。比如：

:root {
    --font-size: 16px;
}
@media (max-width: 600px) {
    :root {
        --font-size: 14px;
    }
}
p {
    font-size: var(--font-size);
}

动态修改样式（配合 JavaScript）：我们可以通过 JavaScript 动态地修改 CSS 变量的值，从而实现动态改变页面样式的效果。比如下面一行代码就能实现主题切换，完全不需要手动去改 CSS 文件。

document.documentElement.style.setProperty("--primary-color", "#ff6600");

提示: 绿叶网的主题换肤功能（在页面顶部右上角），就是使用 CSS 变量来实现的。