本文翻译自：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代码
let number1 = 2;
let number2 = 3;
let total = number1 number2;
console.log(total); // 5
number1 = 4;
total = number1 number2;
console.log(total); // 7
nubmer1number2totalnumber1number2number1total使用变量的妙处在于，它可以让你在一个地方存储值，并且让你在后面能以各种理由去更新它。在程序中，你不需要为不同的值再添加额外的字符表示：任何值的更新都发生在同一个地方。正如，在你定义的变量上。
CSS在很大程度上是一种声明式的语言，而缺少动态能力。你也许会认为，让CSS拥有变量，几乎让上面的说法自相矛盾。如果前端开发仅仅是关于文字游戏，那可以这么说。幸运的是，Web的编程语言很像生活中的语言，它们会随着周围环境和实践需要而不断进化与适应。CSS也同样如此。
简单的说，变量已经成为CSS世界中激动人心的事实，并且你即将亲自看到，对于这个厉害的新技术，学习和使用起来都非常直观。
使用CSS变量有什么好处？
使用CSS变量的好处，跟在其他编程语言中使用变量的好处没什么大的区别。
规范是这样描述这一点的
使用CSS变量，给看似随机的值加上富有信息的名字，从而使得大文件更容易阅读和编辑，更少出错。因为，你只需要在自定义属性中改变一次值，所有应用了这个变量的地方都会自动跟着一起改变。W3C 规范
换句话说，通过给变量起一个对你来说在项目中有意义的名字，你能更容易的管理和维护你的代码。例如，当你为项目中的主色调设置一个变量名
--primary-colorCSS变量和预处理器中的变量有什么不同？
你可能已经在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)*的部分看起来像这样：
--my-cool-background: #73a4f4;
在自定义属性前添加双横线前缀，然后像给普通CSS设值一样，给自定义属性设值。在上面的代码中，我给一个叫做
--my-cool-backgroud而 级联变量(cascading variable) 的部分，由通过
val()var(--my-cool-background);
自定义属性作用于CSS选择器中，
val():root {
--my-cool-background: #73a4f4;
}
/* CSS文件的其他部分 */
#foo {
background-color: var(--my-cool-background);
}
上面的代码片段把
--my-cool-background:root<html>val()background-color这还没完。你可以用同样的浅蓝色，给多个HTML标签的多种可以设置颜色值的地方设值，比如设置它们的
colorborder-colorvar(--my-cool-background)p {
color: var(--my-cool-background);
}
示例1代码，可点击查看。
你还可以从通过利用CSS变量获得另一个CSS变量的值。例如：
--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)，例如：
var(--main-color, #333);
上面的代码中，
#333CSS变量是区分大小写的
与普通CSS属性不同，CSS变量是区分大小写的。
例如，
var(--foo)var(--FOO)--foo--FOOCSS变量受级联关系影响
和普通CSS属性一样，CSS变量是可继承的。例如，我们定义了一个属性，值为
blue:root {
--main-color: blue;
}
当你给任意在
<html>--main-colorblue当你在另一个元素里，为改自定义属性设置了一个新值时，那么所有该元素的子元素都会继承那个新值。例如：
: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变量的作用域限定在父容器中，然后给变量设置想要的颜色，那么里面的图标就会继承父容器的颜色值。下面是相关代码：
/* 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><use>#close-icon<symbol>注意到SVG symbol中，circle元素里的
strokefill--icon-color:root:root {
--icon-color: black;
}
这是当前图标看起来的样子：
这时，如果你把同样的SVG图标放在不同的父容器中，并且在父容器上，给你的CSS变量设置各自的局部值，那么你就会得到不同颜色的图标，并且不用给你的样式表添加多余的规则。这很酷！
为了展示这一点，我们把同样的图标放在一个有
.success<!-- html -->
<div class="success">
<svg>
<use xlink:href="#close-icon" />
</svg>
</div>
现在，让
--icon-color.successgreen/* css */
.success {
--icon-color: green;
}
这个图标的颜色就变成了绿色：
来看看一个完整的示例吧: 示例4代码。
如何在@keyframes
中使用CSS变量
@keyframesCSS变量可以在CSS动画中使用，即可用于常规HTML元素，也可以用于内联的SVG。只需要记得，你得知道让什么元素动，把它视为目标元素，然后创建对该目标元素的选择器，在选择器的作用范围中定义你的CSS变量，然后，使用
val()@keyframes例如，让SVG中
.bubble<ellipse>.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.sidebar100px.sidebar {
--left-pos: 100px;
}
那么，通过JavaScript获取
--left-pos// 缓存你即将操纵的元素
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变量的值，你可以像这样：
sidebarElement.style.setProperty('--left-pos', '200px');
上面的代码将sidebar元素中
--left-pos200px请看看CodePen中的如下示例，你可以交互式地点击侧边栏，修改blend mode属性和背景色。这些实现只用到了CSS变量和JavaScript。
示例6代码。
CSS变量的浏览器支持
除了IE11（它不支持CSS变量），所有主流浏览器都对CSS变量有全面地支持。
对于不支持CSS变量的浏览器，一个变通的方案是使用具有虚拟查询条件(dummy conditional query)的
@supportssection {
color: gray;
}
@supports(--css: variables) {
section {
--my-color: blue;
color: var(--my-color, 'blue');
}
}
考虑到
@supportsval()对于上面的代码，在Chrome和其他支持CSS变量的浏览器中，
<section>
在IE11中，由于它不支持CSS变量，页面将显示灰色文本:
可以查看在线的示例7代码。
此方法的一个缺点是，如果你大量使用CSS变量，而那些不支持CSS变量的浏览器在你的项目中有很高的适配优先级，那么相应的代码会变得很复杂，对于维护来说，甚至是噩梦。
在这种情况下，你可以选择使用带有cssnext的PostCSS，它能让你在CSS代码中使用最新的特性，并且让原本不支持这些属性的浏览器，也能运行这些代码（有点像JavaScript转换器做的事情）。
备注：这里可下载本文所有示列代码。
本文转载于:猿2048https://www.mk2048.com/blog/blog.php?id=hajkh1j&title=CSS变量（自定义属性）实践指南
