CSS变量的简单应用

一、CSS变量介绍

1. 简介

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

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

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

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

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

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

2. CSS变量的作用域

  1. CSS变量是可以继承的,类似可继承的CSS属性。在某元素下定义的CSS变量只能在该元素以及其后代元素中使用。
  2. 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-colorhtml和.content选择器下被定义,.content中的定义将会生效。

二、使用CSS变量

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

1. 前端主题化

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

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

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。

¥赞赏