CSS变量（自定义属性）实践指南
2018-09-01 05:46:01来源：博客园 阅读 ()
本文翻译自：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
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)*的部分看起来像这样：
--my-cool-background: #73a4f4;
在自定义属性前添加双横线前缀，然后像给普通CSS设值一样，给自定义属性设值。在上面的代码中，我给一个叫做--my-cool-backgroud的自定义属性设置了一个颜色值。
而 级联变量(cascading variable) 的部分，由通过val()来使用你的自定义属性组成，开起来像这样：
var(--my-cool-background);
自定义属性作用于CSS选择器中，val()可被当成一个真正的CSS属性一样使用。
: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变量命名规范）：
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);
上面的代码中，#333是一个备用值。当自定义属性值无效或未指定(unset)时，如果这时也没有指定备用值，那么被继承的(inherited)属性值将会被使用。
CSS变量是区分大小写的
与普通CSS属性不同，CSS变量是区分大小写的。
例如，var(--foo)和var(--FOO)是在求两个不同的自定义属性值，分别是--foo和--FOO的。
CSS变量受级联关系影响
和普通CSS属性一样，CSS变量是可继承的。例如，我们定义了一个属性，值为blue：
:root {
--main-color: blue;
}
当你给任意在<html>标签里的元素指定--main-color变量时，它们都会继承到blue这个值。
当你在另一个元素里，为改自定义属性设置了一个新值时，那么所有该元素的子元素都会继承那个新值。例如：
: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>标签，它让你创建一SVG图形的不可见的版本。然后再使用<use>标签生成一个可见的副本。这种方法可以让你根据自己的喜好创建任意多个自定义的图标，也就是通过它的ID(#close-icon)指向那个<symbol>。这比一遍又一遍地写重复的代码创建图形更加简便。如果你想提高这方便的技术，Massimo Cassandro在他的Build Your Own SVG Icons中提供了一个快速教程。
注意到SVG symbol中，circle元素里的stroke属性和text元素里的fill属性：它们都使用了CSS变量，这里是--icon-color。它被定义在:rootCSS文件的选择器中，像这样：
:root {
--icon-color: black;
}
这是当前图标看起来的样子：
这时，如果你把同样的SVG图标放在不同的父容器中，并且在父容器上，给你的CSS变量设置各自的局部值，那么你就会得到不同颜色的图标，并且不用给你的样式表添加多余的规则。这很酷！
为了展示这一点，我们把同样的图标放在一个有.success类的div里：
<!-- html -->
<div class="success">
<svg>
<use xlink:href="#close-icon" />
</svg>
</div>
现在，让--icon-color变量局部化，即把它放在.success中，并设置一个green值。我们来看看发生的变化：
/* css */
.success {
--icon-color: green;
}
这个图标的颜色就变成了绿色：
来看看一个完整的示例吧: 示例4代码。
如何在@keyframes中使用CSS变量
CSS变量可以在CSS动画中使用，即可用于常规HTML元素，也可以用于内联的SVG。只需要记得，你得知道让什么元素动，把它视为目标元素，然后创建对该目标元素的选择器，在选择器的作用范围中定义你的CSS变量，然后，使用val()获取这些变量，把它们设置到@keyframes代码块中。
例如，让SVG中.bubble类里面的<ellipse>元素动起来，你的CSS可能会看起来像这样：
.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：
.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-pos变量的值设置为200px。
请看看CodePen中的如下示例，你可以交互式地点击侧边栏，修改blend mode属性和背景色。这些实现只用到了CSS变量和JavaScript。
示例6代码。
CSS变量的浏览器支持
除了IE11（它不支持CSS变量），所有主流浏览器都对CSS变量有全面地支持。
对于不支持CSS变量的浏览器，一个变通的方案是使用具有虚拟查询条件(dummy conditional query)的@supports代码块:
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转换器做的事情）。
备注：这里可下载本文所有示列代码。
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
上一篇：ECharts动态数据加载
下一篇：前端规范大总结
- DIV居中的经典方法 2020-06-13
- CSS中的float和margin的混合使用 2020-06-11
- Html/css 列表项 区分列表首尾 2020-06-11
- css与javascript重难点，学前端，基础不好一切白费！ 2020-06-11
- ie8下透明度处理 2020-06-11
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
