这篇文章主要讲解了“使用CSS变量有什么好处”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“使用CSS变量有什么好处”吧！
创新互联专注为客户提供全方位的互联网综合服务，包含不限于网站设计制作、成都做网站、天宁网络推广、重庆小程序开发公司、天宁网络营销、天宁企业策划、天宁品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；创新互联为所有大学生创业者提供天宁建站搭建服务，24小时服务热线：13518219792，官方网址：www.cdcxhl.com
什么是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这个伪类中，这让该自定义属性能被全局访问到（即在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;
}
当你给任意在--main-color变量时，它们都会继承到blue这个值。
当你在另一个元素里，为改自定义属性设置了一个新值时，那么所有该元素的子元素都会继承那个新值。例如：
:root { --main-color: blue;
}
.alert { --main-color: red;
}
p { color: var(--main-color);
}
<--! HTML -->
举个例子，假设你想让你的SVG图标能跟随其所在父容器而拥有不同的颜色。你可以把CSS变量的作用域限定在父容器中，然后给变量设置想要的颜色，那么里面的图标就会继承父容器的颜色值。下面是相关代码：
这时，如果你把同样的SVG图标放在不同的父容器中，并且在父容器上，给你的CSS变量设置各自的局部值，那么你就会得到不同颜色的图标，并且不用给你的样式表添加多余的规则。这很酷！
