AI专业者开发社区 1 号成员
  •  0 回帖  •  8 浏览  •  4 个月前
 

CSS变量（自定义属性）实践指南

本文翻译自：https://www.sitepoint.com/practical-guide-css-variables-custom-properties/

转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。

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

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

在本文，你将学会如何使用 CSS 变量，并把它集成到你的 CSS 开发流程中，让你的样式表更好维护，且减少重复。

让我们现在就开始吧！

什么是 CSS 变量？

如果你曾使用过某种编程语言，那么你已经很熟悉变量这个概念了。变量用于存储和更新你的程序所需要的值，以便使它运行。

例如，考虑下面的 JavaScript 代码

?
1
2
3
4
5
6
7
let number1 = 2;
let number2 = 3;
let total = number1 + number2;
console.log(total); // 5
number1 = 4;               
total = number1 + number2;
console.log(total); // 7

nubmer1和 number2是两个变量，分别存储着数字 2 和 3。

total同样是变量，存储着number1与number2之和。在这里它的值就是 5。你可以动态地修改变量里的值，并在程序中使用它们。在上面的代码中，我把number1的值更新为 4，然后再进行求和。使用相同的变量，这个时候total里存储的值就是 5，而不再是 7 了。

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

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

简单的说，变量已经成为 CSS 世界中激动人心的事实，并且你即将亲自看到，对于这个厉害的新技术，学习和使用起来都非常直观。

使用 CSS 变量有什么好处？

使用 CSS 变量的好处，跟在其他编程语言中使用变量的好处没什么大的区别。

规范是这样描述这一点的

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

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

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

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

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

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

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

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

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

CSS 变量：语法

虽然本文为了简洁，我使用了CSS变量 (CSS variables) 这个称呼，但官方的规范把它们称作作为级联变量的 CSS 自定义属性(CSS custom properties for cascading variables)。*CSS 自定义属性 (CSS custom property)* 的部分看起来像这样：

?
1
--my-cool-background: #73a4f4;

在自定义属性前添加双横线前缀，然后像给普通 CSS 设值一样，给自定义属性设值。在上面的代码中，我给一个叫做--my-cool-backgroud的自定义属性设置了一个颜色值。

而 级联变量 (cascading variable) 的部分，由通过val()来使用你的自定义属性组成，开起来像这样：

?
1
var(--my-cool-background);

自定义属性作用于CSS 选择器中，val()可被当成一个真正的CSS 属性一样使用。

?
1
2
3
4
5
6
7
8
:root {
    --my-cool-background: #73a4f4;
}
 
/* CSS文件的其他部分 */
#foo {
    background-color: var(--my-cool-background);
}

上面的代码片段把--my-cool-background这个自定义属性的作用域定义在:root这个伪类中，这让该自定义属性能被全局访问到（即在<html>标签内部的任何地方）。然后，使用val()函数把ID 为foo 的容器的background-color设置为自定义属性的值，这时该容器就有了浅蓝的背景色。

这还没完。你可以用同样的浅蓝色，给多个HTML 标签的多种可以设置颜色值的地方设值，比如设置它们的color和border-color。方法很简单，就是通过var(--my-cool-background)拿到自定义属性的值，然后给合适的CSS 属性设置上去。（当然，在事情变得复杂之前，我建议思考一下你的CSS 变量命名规范）：

?
1
2
3
p {
    color: var(--my-cool-background);
}

示例 1 代码，可点击查看。

你还可以从通过利用 CSS 变量获得另一个 CSS 变量的值。例如：

?
1
2
3
--top-color: orange;
--bottom-color: yellow;
--my-gradient: linear-gradient(var(--top-color), var(--bottom-color));

上面的代码创建了一个--my-gradient变量，是一个渐变样式，它的值被设为--top-color的值和--bottom-color的值组合的结果。现在，你可以在任何时候修改你的渐变样式，仅仅是修改变量的值就可以了，而不再需要在样式表里满文件地去找用到这个渐变样式地方。

示例 2代码。

最后，你可以在CSS 变量中加入一个或多个备用值(fallback value/s)，例如：

?
1
var(--main-color, #333);   

上面的代码中，#333是一个备用值。当自定义属性值无效或未指定 (unset) 时，如果这时也没有指定备用值，那么被继承的 (inherited) 属性值将会被使用。

CSS 变量是区分大小写的

与普通 CSS 属性不同，CSS 变量是区分大小写的。

例如，var(--foo)和var(--FOO)是在求两个不同的自定义属性值，分别是--foo和--FOO的。

CSS 变量受级联关系影响

和普通 CSS 属性一样，CSS 变量是可继承的。例如，我们定义了一个属性，值为blue：　　

?
1
2
3
:root {
    --main-color: blue;
}

当你给任意在<html>标签里的元素指定--main-color变量时，它们都会继承到blue这个值。

当你在另一个元素里，为改自定义属性设置了一个新值时，那么所有该元素的子元素都会继承那个新值。例如：　　

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
:root {
    --main-color: blue;
}
.alert {
    --main-color: red;
}
p {
    color: var(--main-color);
}
<--! HTML -->
<html>
  <head>
    <!-- head code here -->
  </head>
 
  <body>
    <div>
      <p>blue 的段落</p>
      <div class="alert">
        <p>red 的段落</p>
      </div>
    </div>
  </body>
</html>

在上面的标签中，第一个p段落会继承到全局的--main-color值，它是蓝色。

在 div 标签中拥有.alert类的段落会是红色，因为它的值继承自局部作用域里的--main-color。

示例 3 代码

知道目前这些规则差不多够了。让我们开始写代码吧！

如何在 SVG 中使用 CSS 变量

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

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

?
1
2
3
4
5
6
7
8
9
10
11
12
/* inline SVG symbol for the icon */
<svg>
  <symbol id="close-icon" viewbox="0 0 200 200">
    <circle cx="96" cy="96" r="88" fill="none" stroke="var(--icon-color)" stroke-width="15" />
    <text x="100" y="160" fill="var(--icon-color)" text-anchor="middle" style="font-size:250px;">x</text>
  </symbol>
</svg>
 
/* first instance of the icon */
<svg>
  <use xlink:href="#close-icon" />
</svg>

上面的代码使用了<symbol>标签，它让你创建一 SVG 图形的不可见的版本。然后再使用<use>标签生成一个可见的副本。这种方法可以让你根据自己的喜好创建任意多个自定义的图标，也就是通过它的 ID(#close-icon) 指向那个<symbol>。这比一遍又一遍地写重复的代码创建图形更加简便。如果你想提高这方便的技术，Massimo Cassandro 在他的Build Your Own SVG Icons中提供了一个快速教程。

注意到 SVG symbol 中，circle 元素里的stroke属性和 text 元素里的fill属性：它们都使用了 CSS 变量，这里是--icon-color。它被定义在:rootCSS 文件的选择器中，像这样：　　

?
1
2
3
:root {
    --icon-color: black;
}

这是当前图标看起来的样子：

这时，如果你把同样的 SVG 图标放在不同的父容器中，并且在父容器上，给你的 CSS 变量设置各自的局部值，那么你就会得到不同颜色的图标，并且不用给你的样式表添加多余的规则。这很酷！

为了展示这一点，我们把同样的图标放在一个有.success类的 div 里：

?
1
2
3
4
5
6
<!-- html -->
<div class="success">
    <svg>
        <use xlink:href="#close-icon" />
    </svg>
</div>

现在，让--icon-color变量局部化，即把它放在.success中，并设置一个green值。我们来看看发生的变化：

?
1
2
3
4
/* css */
.success {
    --icon-color: green;
}

这个图标的颜色就变成了绿色：　　

　　

来看看一个完整的示例吧: 示例 4 代码。

如何在@keyframes中使用 CSS 变量

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

例如，让 SVG 中.bubble类里面的<ellipse>元素动起来，你的 CSS 可能会看起来像这样：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.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 的calc()，并用var()函数进行计算的。它们增强了你代码的灵活性。

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

这里有个完整的例子供你体验：示例 5 代码。　　

如何通过 JavaScript 操作 CSS 变量

另一个超级酷的事情就是，你可以直接通过 JavaScript 代码访问 CSS 变量。

假设在你的 CSS 文件中，有一个叫做--left-pos的变量，作用在.sidebar选择器中，值为100px：

?
1
2
3
.sidebar {
    --left-pos: 100px;
}

那么，通过JavaScript 获取--left-pos值，会像下面这样：

?
1
2
3
4
5
6
7
8
9
10
11
// 缓存你即将操纵的元素
const sidebarElement = document.querySelector('.sidebar');
 
// 缓存sidebarElement的样式于cssStyles中
const cssStyles = getComputedStyle(sidebarElement);
 
// 获取 --left-pos CSS变量的值
const cssVal = String(cssStyles.getPropertyValue('--left-pos')).trim();
 
// 将CSS 变量的值打印到控制台: 100px
console.log(cssVal);

如果想通过JavaScript 设置CSS 变量的值，你可以像这样：

?
1
sidebarElement.style.setProperty('--left-pos', '200px');

上面的代码将 sidebar 元素中--left-pos变量的值设置为200px。

请看看 CodePen 中的如下示例，你可以交互式地点击侧边栏，修改 blend mode 属性和背景色。这些实现只用到了 CSS 变量和 JavaScript。

示例 6 代码。

CSS 变量的浏览器支持

除了 IE11（它不支持 CSS 变量），所有主流浏览器都对 CSS 变量有全面地支持。

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

?
1
2
3
4
5
6
7
8
9
10
section {
    color: gray;
}
 
@supports(--css: variables) {
    section {
        --my-color: blue;
        color: var(--my-color, 'blue');
    }
}

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

对于上面的代码，在 Chrome 和其他支持 CSS 变量的浏览器中，<section>标签里的文本将是蓝色：

在IE11 中，由于它不支持CSS 变量，页面将显示灰色文本:

　　

可以查看在线的示例 7代码。

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

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

备注：这里可下载本文所有示列代码。