CSS变量的简单应用

一、CSS变量介绍

1. 简介

CSS变量，和其它编程语言中的变量类似，可以存储值、覆盖值、读取值。对于CSS而言，变量命名和设置值也需要遵守一定的规则。从一个简单的例子来了解CSS变量的定义：

html {
    --text-color: #333;
    --bg: white;
}

这个例子定义了两个变量，变量名分别是text-color和background，变量值分别为#333和white。变量值可以是任何有效的CSS，而变量名的限制比较随意，以双短横（--）开头，后面可以跟字母、数字(不能在第一位)、下划线、甚至中文等。

定义了CSS变量，还不会对页面样式产生任何影响。CSS变量的定义时为了我们在其它地方使用它：

.text {
    color: var(--text-color);
}

var()函数用于CSS变量的取值，可以像使用CSS属性值一样使用CSS变量的值。

2. CSS变量的作用域

CSS变量是可以继承的，类似可继承的CSS属性。在某元素下定义的CSS变量只能在该元素以及其后代元素中使用。

CSS变量可以被覆盖，里当前元素最近的元素内赋值的变量将会生效:

<div class="content">
    <div class="text">测试文本</div>
</div>

html {
    --text-color: #333;
    --bg: white;
}
.content {
    --text-color: green;
}
.text {
    color: var(--text-color); // green生效，而不是#333
    background: var(--bg)
}

上例中，--text-color在html和.content选择器下被定义，.content中的定义将会生效。

二、使用CSS变量

通常，CSS变量可以用来优化代码，比如相同的颜色值散落在代码各处，使用CSS变量可以将颜色值收敛起来，将来发生调整可以很简单地一键替换。除此之外，还有一些场景也特别适合使用CSS变量，比如前端主题化（深色模式等）、响应式布局等。

1. 前端主题化

越来越多的Web产品都支持了深色模式，有的产品甚至可以支持多个主题，使用CSS变量可以很简单地实现类似需求，比如字节飞书文档深色模式就是用该方式实现。

为不同的主题定义不同的颜色变量：

html {
    --text-color: #1f2329;
    --bg: white;
    // ...
}

html[theme=dark] {
    --text-color: #EBEBEB;
    --bg: #1A1A1A;
    // ...
}

2. 响应式布局

在Web页面需要一套代码适配PC、移动端等不同屏幕尺寸的设备是，可以尝试使用CSS变量和媒体查询的方式，定义不同设备下的字号、间距等。本站部分样式就使用了这种形式：

@media screen and (min-width: 600px)
    .xxxx {
        --padding: 20px; // 宽屏下的间距
        --title-fz: 18px;  // 宽屏下的字号
        --des-fz: 14px;
        --content-fz: 16px;
    }

@media screen and (max-width: 600px)
    .xxxx {
        --padding: 8px; // 窄屏下的间距
        --title-fz: 14px; // 窄屏下的字号
        --des-fz: 12px;
        --content-fz: 14px;
    }

三、CSS变量的一些细节

1. 在JS或HTML中定义CSS变量

在HTML中定义CSS变量与定义其它内联属性一样，通过style属性定义即可：

<div class="content" style="--text-color: green">
    <div class="text">测试文本</div>
</div>

在JS中设置CSS变量则与一般样式属性有差异，直接赋值的方式是无效的，需要使用setProperty函数：

// 错误方式
dom.style['--text-color'] = 'pink'
// 正确方式
dom.style.setProperty('--text-color', 'pink')

2. var函数接收多个参数

var函数除了接收变量外，还可以接收一个备用的属性值，如果变量未定义，则var的返回值会取该备用属性值。

下例中，如果查找不到--text-color则green值将会生效：

color: var(--text-color, green);

需要注意的是var的第二个参数，应该是一个有效的CSS属性值，而不能是变量名。

color: var(--text-color, --text-color2); // 错误用法
color: var(--text-color, var(--text-color2)); // 正确用法

然而，如果var函数的第一个参数有定义，但对于当前属性是一个无效值，则备选属性也无法生效。

html {
    --text-color: 12px;
}
.text {
    color: var(--text-color, green);
}

text的color属性会继承父级的color，而不是green。