如今互联项目变得越来越大时，它的CSS都会变得像天文数字一样大。庞大无序，还需要花费大量精力来整理。大型互联网公司为解决这个问题，都会加快CSS变量成为主流。这样能够方便开发人员重复调用多次使用CSS属性。现在的Sass和Less预处理器需要在使用前进行编译。而 CSS变量，则可以在浏览器中轻松使用它们！

1(1).jpg

定义和使用

下面介绍变量在vanilla CSS中使用。变量的规则和定义与一般规则相同。使用它的方法是通过将声明添加到：root pseudo-class 使其他选择器都可以继承调用。要访问变量中的值，我们可以使用var（...）语法。但要注意区分大小写。

t0198b978cf1e5351f5_看图王.web.jpg

支持的浏览器

Firefox支持CSS变量。但谷歌浏览器49.0或更高版本可以手动启用。如果你的版本是Chrome 48.0，则可以通过转到chrome：// flags /并找到启用实验性网络平台功能来启用此项技术。

4.jpg t015752378cab3b3da8_看图王.web.jpg

示例1——主题颜色

当需要对多个元素重复调用相同的规则时，CSS中的变量最为适用。例如：重复的主题颜色。每次想要重复使用相同的主题颜色时，可以将它放在一个变量中，而不是重复的复制和粘贴。如果用户不喜欢选择的蓝色阴影，可以在一个地方改变风格（变量），以改变整个主题的颜色。没有变量，不得不手动搜索并一个一个替换。下图演示换成灰色。

5.jpg 6.jpg

示例2——复杂属性

变量的另一个常用地方是想要保存属性值，比如box-shadow，transform和font。这样就可以再也不用重复记住它。通过将属性放置在一个变量中，并可以用语义或生活中的名称定义它，这样更容易记住他。

7.jpg

示例3——最近原则

当多次声明定制属性时，最近原则有助于解决冲突，并且样式表中最近的定义将覆盖它以前的定义。

8.jpg

CSS变量（CSS自定义属性）在主流互联网公司和互联网大型项目已经很常见了。常表现为风格统一而使用颜色变量 ；一致的组件属性（布局，定位等）；避免代码冗余等。希望本文对大家有所帮助。