web前端开发，CSS/CSS3原生变量你真的了解吗？

为什么需要变量呢?

在所有的程序语言中，变量的设置都是最开始的学习内容，那为什么各种程序都需要变量呢？变量的最大的好处就是可以降低代码的大小，通过在内容空间中存储一个变量就可以在之后的程序中多次使用该变量，甚至可以通过简单的计算得到多个值。在传统的CSS中有些属性值字符长度大，且需要重复设置，这样就不可避免的增大了页面的体积。还有有些响应式网站中应用到的比例布局，这时候需要根据父元素宽高属性通过一个比例计算来设置新元素的宽高，这个工作费时且费力。所以市面上就出现了SASS和LESS等css的预编译工具，就是为了给开发者提升一个开发效率。

在这里我还是要推荐下我自己建的web前端开发学习群：731669587，群里都是学web前端开发的，如果你正在学习前端 ，小编欢迎你加入，今天分享的这个案例已经上传到群文件，大家都是软件开发党，不定期分享干货（只有前端软件开发相关的），包括我自己整理的一份2018最新的前端进阶资料和高级开发教程，欢迎进阶中和进想深入前端的小伙伴。

CSS原生变量

▼基本语法

css的原生变量属性基本按照以下语法来设置的：

定义变量–变量名称：变量值；，比如 –color:rgb(123,212,100);

使用变量:var(–变量名)，比如 background-color:var(–color)

由上可得：

CSS变量的权重跟CSS选择器保持一致，如果变量所在的选择器和使用变量的元素没有交集，是没有效果的。例如#alert定义的变量，只有id为alert的元素才能享有。如果你想变量全局使用，则你可以设置在:root选择器上；

当存在多个同样名称的变量时候，变量的覆盖规则由CSS选择器的权重决定的。