捋一捋css变量

夏茉薇薇
239 阅读15分钟

1. 背景

Sass 和Less 这样的预处理器，让我们的 CSS 代码保持良好的结构和可维护性。像变量、混合(mixins)、循环控制等特性，增强了动态编写CSS的能力，从而减少重复代码，也加快了我们开发速度。

近年来，一些动态特性开始作为规范的一部分，出现在 CSS 语言中。CSS 变量(CSS variables)，或者用它的官方称谓，叫作自定义属性(custom properties) ，已经可用，并且有非常棒的浏览器支持，而CSS mixins也正在取得进展。

那让我们一起来学会如何使用 CSS 变量，并把它集成到我们的 CSS 开发流程中，让样式表更好维护，且减少重复。

让我们现在就开始吧！

2. 概念

变量是什么，搞编程的都懂的。

使用变量的妙处在于，它可以让你在一个地方存储值，并且让你在后面能以各种理由去更新它。在程序中，你不需要为不同的值再添加额外的字符表示：任何值的更新都发生在同一个地方。正如，在你定义的变量上。

CSS在很大程度上是一种声明式的语言，而缺少动态能力。你也许会认为，让CSS拥有变量，几乎让上面的说法自相矛盾。如果前端开发仅仅是关于文字游戏，那可以这么说。幸运的是，Web的编程语言很像生活中的语言，它们会随着周围环境和实践需要而不断进化与适应。CSS也同样如此。

3. css变量的意义与兼容性

3.1. CSS变量和预处理器中的变量有什么不同？

你可能已经在CSS预处理器中尝试过使用变量而带来的好处了，比如Sass和Less。

预处理器让你能设置变量，以及在函数、循环、数学计算等等地方中使用它们。这是否意味着CSS变量已经无关紧要了呢？

那可未必，主要是因为，CSS变量与预处理器中的变量其实是不同的东西。

这些不同基于一个事实：CSS变量是浏览器中直接可用的CSS属性，而预处理中的变量是用于编译成常规的CSS代码，浏览器其实对它们一无所知。

这意味着，你可以在样式表中，在内联样式中，在SVG的标签中直接更新CSS变量，甚至可以在运行时用JavaScript直接修改它。而你是无法对预处理器中的变量做上面这些操作的。CSS变量开启了一个充满可能性的新世界大门。

不是说你必须要在两者间做出选择：没有什么东西限制你，你可以同时使用CSS变量和预处理变量，并享有它们各自带来的巨大好处。

3.2. 使用 css 变量有什么好处？

可读性和可维护性是CSS自定义属性最大的优势。

规范是这样描述这一点的，使用CSS变量，给看似随机的值加上富有信息的名字，从而使得大文件更容易阅读和编辑，更少出错。因为，你只需要在自定义属性中改变一次值，所有应用了这个变量的地方都会自动跟着一起改变。W3C 规范

换句话说，通过给变量起一个对你来说在项目中有意义的名字，你能更容易的管理和维护你的代码。例如，当你为项目中的主色调设置一个变量名--primary-color，那么你后面再修改这个主色调时，只需要改动一处，而不需要在不同位置的多个CSS文件中去手动修改多次值。

我们需要感谢 CSS自定义属性，让我们可以在CSS中使用原生的变量，而不再需要借助于类似Sass这样的CSS处理器。

3.3. css 变量的兼容性

对于现代浏览器来说，CSS变量的兼容性其实还是蛮好的，所以大家可放心使用。毕竟现在都是各大浏览器厂商快速迭代的时刻，产品对于用户体验来说是占了很大比重，因此在条件允许的情况下还是大胆尝新，不要被一些过去的所谓的规范所约束着。

css-variables-28.png

对于不支持CSS变量的浏览器，一个变通的方案是使用具有虚拟查询条件(dummy conditional query)的@supports代码块:

section {
    color: gray;
}

@supports(--css: variables) {
    section {
        --my-color: blue;
        color: var(--my-color, 'blue');
    }
}

考虑到@supports在IE/Edge里也起作用，上面的方法是可行的。如果你在var()函数中使用了备用值，那么你的代码将更加可靠，它能在兼容性不好的浏览器中实现优雅降级。

此方法的一个缺点是，如果你大量使用CSS变量，而那些不支持CSS变量的浏览器在你的项目中有很高的适配优先级，那么相应的代码会变得很复杂，对于维护来说，甚至是噩梦。

在这种情况下，你可以选择使用带有cssnext的PostCSS，它能让你在CSS代码中使用最新的特性，并且让原本不支持这些属性的浏览器，也能运行这些代码（有点像JavaScript转换器做的事情）。

4. 语法

4.1. 变量的声明

声明变量的时候，变量名前面要加两根连词线（--）。

body {
  --foo: #7F583F;
  --bar: #F7EFD2;
}

各种值都可以放入 CSS 变量。

:root{
  --main-color: #4d4e53;
  --main-bg: rgb(255, 255, 255);
  --logo-border-color: rebeccapurple;

  --header-height: 68px;
  --content-padding: 10px 20px;

  --base-line-height: 1.428571429;
  --transition-duration: .35s;
  --external-link: "external link";
  --margin-top: calc(2vh + 20px);
}

注意： 变量名大小写敏感，--header-color和--Header-Color是两个不同变量。

css变量（自定义属性）是普通属性，可以在任意元素上声明他们。

CSS自定义属性可以在任意元素上，比如p、section、aside、根元素，甚至是伪元素上声明。

p { 
    --color: blue; 
} 
section { 
    --color: #bad;
} 
aside { 
    --color: yellow; 
} 
:root {
    --color: teal; 
} 
p:before { 
    --color: red; 
}

4.2. var函数

var()函数用于读取变量。

a {
  color: var(--foo);
  text-decoration-color: var(--bar);
}

var()函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。

color: var(--foo, #7F583F);

第二个参数不处理内部的逗号或空格，都视作参数的一部分。

var(--font-stack, "Roboto", "Helvetica");
var(--pad, 10px 15px 20px);

var()函数还可以用在变量的声明。

:root {
  --primary-color: red;
  --logo-text: var(--primary-color);
}

注意，变量值只能用作属性值，不能用作属性名。

.foo {
  --side: margin-top;
  /* 无效 */
  var(--side): 20px;
}

上面代码中，变量--side用作属性名，这是无效的。

4.3. 变量值的类型

如果变量值是一个字符串，可以与其他字符串拼接。

--bar: 'hello';
--foo: var(--bar)' world';

如果变量值是数值，不能与数值单位直接连用。

.foo {
  --gap: 20;
  /* 无效 */
  margin-top: var(--gap)px;
}

上面代码中，数值与单位直接写在一起，这是无效的。必须使用calc()函数，将它们连接。

.foo {
  --gap: 20;
  margin-top: calc(var(--gap) * 1px);
}

如果变量值带有单位，就不能写成字符串。

/* 无效 */
.foo {
  --foo: '20px';
 font-size: var(--foo);
}

 
/* 有效 */
.foo {
  --foo: 20px;
  font-size: var(--foo);
}

4.4. 作用域

同一个 CSS 变量，可以在多个选择器内声明。读取的时候，优先级最高的声明生效。这与 CSS 的"层叠"（cascade）规则是一致的。

下面是一个例子。

<style>
  :root { --color: blue; }
  div { --color: green; }
  #alert { --color: red; }
  * { color: var(--color); }
</style>

<p>蓝色</p>
<div>绿色</div>
<div id="alert">红色</div>

上面代码中，三个选择器都声明了--color变量。不同元素读取这个变量的时候，会采用优先级最高的规则，因此三段文字的颜色是不一样的。

这就是说，变量的作用域就是它所在的选择器的有效范围。

body {
  --foo: #7F583F;
}

.content {
  --bar: #F7EFD2;
}

上面代码中，变量--foo的作用域是body选择器的生效范围，--bar的作用域是.content选择器的生效范围。

由于这个原因，全局的变量通常放在根元素:root里面，确保任何选择器都可以读取它们。

:root {
  --main-color: #06c;
}

5. 其他补充场景

5.1. CSS变量可以用在HTML元素的style属性中

你可以选择在内联样式中声明CSS变量，它同样是可以按照你的预期进行工作。

<!--HTML-->
<html style="--color: red"> 

<!--CSS--> 
body { 
    color: var(--color)
}

5.2. 解决多个声明的CSS变量

CSS变量属性和其他CSS属性一样，可以用标准级联解决多个相同声明的CSS变量。

/* 声明相同名称的CSS自定义属性 */ 
:root { --color: blue; } 
div { --color: green; } 
#alert { --color: red; } 

/* 使用CSS自定义属性 */ 
* { color: var(--color); }

就上面声明的CSS变量，下列元素的文本颜色将会是什么颜色呢？

<p>What's my color?</p>
<div>and me?</div>
<div id='alert'>
    What's my color too?
    <p>color?</p>
</div>

你能基于上述的知识点猜出来结果吗？

第一个<p>元素是blue。因为在p选择器上没有显式定义--color，所以它将继承来自:root中的--color的值。

:root { --color: blue; }

第一个<div>元素将是green。这一点非常的明显，因为在div选择器上显示的声明了--color自定义属性的值为green：

div { --color: green; }

ID名为#alert的div元素，它的颜色不再是green，将会是red，那是因为在#alert选择器中也显式的声明了--color的值为red:

#alert { --color: red; }

该ID选择器直接声明了一个自定义属性的作用域，其定义的值将会覆盖前面div声明的css变量，那是因为#alert选择器的权重高于div选择器。

由于最后一个<p>元素在#alert内，所以它的颜色也将是red。

在p元素上没有显式声明CSS变量，但在:root元素上显式的声明了，因为正如你所期望的一样，其颜色为blue。

:root { --color: blue; }

但CSS变量属性和CSS中的其他属性是类似的，也具有继承这样的特性。所以最后一个<p>元素会继承其父元素#alert中声明的CSS变量属性值：

#alert { --color: red; }

image.png

5.3. 无效的CSS变量将会发生什么？

如果是语法错误，将会直接视为无效，但无效的var()将会被该属性的初始值或继承值替代。比如下面的示例：

:root { 
    --color: 20px; 
}
p { 
    background-color: red; 
}
p { 
    background-color: var(--color);  /* 设置了一个无效的颜色值 */
}

如你所预期的一样，--color被var()替换了，但是属性值background-color:20px是一个无效值。由于background-color不是一个可继承的属性，所以该值将默认为background-color的初值值transparent。

请注意，如果你已经写了background-color: 20px没有自定义变量属性来替换，那么background-clor将是无效的。要是前面有对应的声明，将会使用前面的声明。

5.4. 如何通过javascript操作css变量

JavaScript 也可以检测浏览器是否支持 CSS 变量。

const isSupported =window?.CSS?.supports('--a', 0);
 
if (isSupported) {
  /* supported */
} else {
  /* not supported */
}

JavaScript 操作 CSS 变量的写法如下。

// 设置变量
document.body.style.setProperty('--primary', '#7F583F');

// 读取变量
document.body.style.getPropertyValue('--primary').trim();
 
// 删除变量
document.body.style.removeProperty('--primary');

这意味着，JavaScript 可以将任意值存入样式表。下面是一个监听事件的例子，事件信息被存入 CSS 变量。

const docStyle = document.documentElement.style;

document.addEventListener('mousemove', (e) => {
  docStyle.setProperty('--mouse-x', e.clientX);
  docStyle.setProperty('--mouse-y', e.clientY);
});

那些对 CSS 无用的信息，也可以放入 CSS 变量。

--foo: if(x > 5) this.width = 10;

上面代码中，--foo的值在 CSS 里面是无效语句，但是可以被 JavaScript 读取。这意味着，可以把样式设置写在 CSS 变量中，让 JavaScript 读取。

所以，CSS 变量提供了 JavaScript 与 CSS 通信的一种途径。

5.5. 如何在 svg 及 @keyframes 中使用 css 变量

CSS变量和SVG配合得很好。你可以使用CSS变量去修改SVG中的样式，以及和呈现相关的属性。

举个例子，假设你想让你的SVG图标能跟随其所在父容器而拥有不同的颜色。你可以把CSS变量的作用域限定在父容器中，然后给变量设置想要的颜色，那么里面的图标就会继承父容器的颜色值。

/* html相关代码 */
<div>
  <svg xmlns="http://www.w3.org/2000/svg" className="icon-container">
    <symbol id="close-icon" viewBox="0 0 200 200">
      <circle cx="96" cy="96" r="88" fill="none" stroke="var(--icon-color)" strokeWidth="15" />
      <text x="100" y="160" fill="var(--icon-color)" textAnchor="middle" style={{fontSize:'250px'}}>x</text>
    </symbol>
  </svg>

  <div className="container">
    <div>
      <h2>Default Icon</h2>
      <svg role="img" dangerouslySetInnerHTML={{__html:'<use xlink:href="#close-icon"></use>'}}></svg>
    </div>
    <div className="danger">
      <h2>Danger Icon</h2>
      <svg role="img" dangerouslySetInnerHTML={{__html:'<use xlink:href="#close-icon"></use>'}}></svg>
    </div>
    <!-- 此处省略其他颜色的按钮代码 -->
    ...
  </div>
</div>

/* css代码 */
:root {
  --icon-color: gray;
}
.danger {
  --icon-color: red;
}
.alert {
  --icon-color: orange;
}
.success {
  --icon-color: green;
}
// 以下省略其他样式代码
 ...

image.png

CSS变量可以在CSS动画中使用，即可用于常规HTML元素，也可以用于内联的SVG。只需要记得，你得知道让什么元素动，把它视为目标元素，然后创建对该目标元素的选择器，在选择器的作用范围中定义你的CSS变量，然后，使用var()获取这些变量，把它们设置到@keyframes代码块中。

.bubble {
  --direction-y: 30px;
  --transparency: 0;
  animation: bubbling 3s forwards infinite;
}

@keyframes bubbling {
  0% {
    transform: translatey(var(--direction-y));
    opacity: var(--transparency);
  }
  40% {
    opacity: calc(var(--transparency) + 0.2);
  }
  70% {
    opacity: calc(var(--transparency) + 0.1);
  }
  100% {
    opacity: var(--transparency);
  }
}

上面只展示了关于css变量在 @keyframes 中的使用，案例完整代码可以参考keyframe 中使用css 变量

注意到这是如何借助CSS的calc()，并用var()函数进行计算的。它们增强了你代码的灵活性。

这个例子简洁的地方在于，利用 CSS变量属性，你可以简单的修改相应选择器里变量值而调整动画，而不需要挨个去查找@keyframes里的属性了。

6. 综合小实践

使用 CSS变量切换 Web 站点的皮肤

切换Web网站的皮肤效果，我想你以前肯定有碰到过。比如像下面这样的效果：

那么这样的一个效果，使用CSS变量能有多简单呢？我们来一起看看。

image.png

在此之前，我想先提一下，这个例子非常的重要。在这个示例中，将会涉及到使用JavaScript更新CSS变量的一个方法。

我们真正想做的

CSS变量美妙之处在于它们的响应性。一旦它们被更新，只要属性的值使用了CSS变量，就将会被更新。

拆解一下需求，能很好的理解整个过程。

第一步：点击切换按钮；
第二步：更新相关css变量值；
第三步：浏览器立马响应更新背景与字体颜色。

我门看到需要监听鼠标事件，我们需要通过JavaScript给按钮添加点击事件的监听。

对于这个简单的示例，都是基于CSS变量来对整个页面的背景颜色和文本颜色做切换。也就是说，当用户点击上面的任一按钮时，他们将CSS变量设置为其他颜色。因此，页面的背景颜色和文本颜色会做相应的变化，从而实现切换皮肤的效果。

模板结构

页面所需的模板结果如下：

<div class="theme">
    <button value="dark">dark</button>
    <button value="calm">calm</button>
    <button value="light">light</button>
</div>

<article>
    ...
</article>

在.theme容器中包含了三个button。另外为了节约篇幅，把article元素中的内容省略了。

页面样式

这个项目的成功之处就是页面的样式。而其中的诀窍又很简单。我们没有直接设置background-color和color的值，而是基于CSS自定义属性来给他们设置属性值。下面就是我想要表达的意思：

body {
    background-color: var(--bg, white);
    color: var(--bg-text, black)
}

要实现切换皮肤的效果，原因很简单。每当单击一个按钮时，将要更改body中对应的两个CSS变量的值。在更改之后，页面的整体样式将被更新。是不是非常的简单。

接下来，我们看看怎么通过JavaScript来实现CSS变量的更新。

添加JavaScript代码

下面是这个示例效果所需的所有JavaScript代码：

const root = document.documentElement 
const themeBtns = document.querySelectorAll('.theme > button')

themeBtns.forEach((btn) => {
    btn.addEventListener('click', handleThemeUpdate)
})

function handleThemeUpdate(e) {
    switch(e.target.value) {
        case 'dark': 
            root.style.setProperty('--bg', 'black')
            root.style.setProperty('--bg-text', 'white')
            break
        case 'calm': 
            root.style.setProperty('--bg', '#B3E5FC')
            root.style.setProperty('--bg-text', '#37474F')
            break
        case 'light':
            root.style.setProperty('--bg', 'white')
            root.style.setProperty('--bg-text', 'black')
            break
    }
}

看到上面这一坨JavaScript代码，千万别吓到你。事实上这比你想像的要简单得多。

首先，通过const root = document.documentElement来获取根元素。这里的根元素指的就是<html>元素。明白这一点是非常重要的。如果你感到好奇，这并奇怪，因为它需要设置CSS变量的新值。

同样的，可以通过const themeBtns = document.querySelectorAll('.theme > button')选到.theme元素下的所有button元素。querySelectorAll会生成一个类似数组的数据结构，需要对这个数组进行循环遍历。遍历每个按钮，并给其添加一个单击事件监听器。具体方法如下：

themeBtns.forEach((btn) => {
    btn.addEventListener('click', handleThemeUpdate)
})

接下来我们解释一下handleThemeUpdate函数。每个按钮补点击时都会有一个handleThemeUpdate作为它的回调函数。注意，什么按钮被点击，然后执行正确的操作变得非常重要。

在此基础上，使用了一个operator开关器，并根据被单击的按钮的值执行一些操作。现在你再看一下JavaScript代码，你就能很轻易的理解它了。

好了，现在你一定很心动，手痒想要亲自实践一下了吧，下面有两个小 case 一起来动手实现吧！

练习1: 悬浮跟踪按钮

image.png

练习2: 漂亮的心形加载条

image.png

image.png

image.png

image.png

写在最后

CSS得到了什么呢？

得到了一个巨大的宝藏，一个随时可以拿来使用的宝藏。

我想要点击按钮的时候有什么花哨的反馈，或者点击页面空白也来个创意的交互提示，完全不成问题，随用随取，无比方便，无比自由。

可以说，这种模式是未来web开发的标配。

参考链接：

阮一峰-css变量教程
CSS变量（自定义属性）实践指南
使用CSS自定义属性（变量）
CSS变量对JS交互组件开发带来的提升与变革

提升链接：

妙用css变量
你应该掌握的CSS自定义属性技术点

avatar
文章
阅读
粉丝