大家好，我是一碗周，一个在舒适区垂死挣扎的前端，如果写的文章有幸可以得到你的青睐，万分有幸~
写在前面
在CSS中使用变量并不是一个稀罕事，早在2007年Sass的诞生，就可以通过预处理的方式去处理变量，相继的又出现了Less和Stylus预处理器。
原生CSS直到CSS3的推出，才出现了变量 （又称为自定义属性 ）的概念，现在我们就来学习一下。
基本用法
原生CSS定义变量，变量名需要使用两个减号--开始，其值可以是任何有效的CSS值。定义CSS比那里的写法与普通CSS属性的写法是一致的。语法规则如下：
element {
--main-text-color: #333333;
}
其中
--main-text-color表示变量名，#333333表示变量值。
那原生CSS为什么采用两个减号--开始，我猜测是因为@被Less占了，$被Sass占了，它被迫选择了--。
原生CSS变量是受HTML层级关系的限制的，并从其父级继承这个值。所以说最佳的实践就是定义在根伪类:root选择器上。
示例代码如下：
:root {
--main-text-color: #FF6A00;
}
然后我们的HTML结构如下：
<h1 class="text">彼岸繁華</h1>
现在我们已经定义好了变量和HTML结构，使用CSS中的变量使用var()函数，实现如下：
.text {
color: var(--main-text-color);
}
最终的实现效果如下：
值得注意的是 自定义属性的大小写是敏感 的，即--my-color 和 --My-color会被认为这是两个变量。
复杂值的用法
当我们需要使用一个函数作为一个值去使用的时候，例如下面这段代码
background-image: url(./image/avatar.png);
使用变量定义的时候不应该只定义./image/avatar.png，而是将整个值作为一个变量，定义如下：
--avatar: url('./image/avatar.png');
background-image: url(./image/avatar.png);
变量的继承性
原生CSS的变量存在着继承，也就是说我们为某个父级添加一个变量，可以在子级任何访问。
HTML结构如下：
<div class="parent">
<div class="child">彼岸繁華</div>
</div>
CSS的代码如下：
.parent {
--color: #FF6A00;
--font-size: 24px;
--font-weight: 600;
}
.child {
color: var(--color);
font-size: var(--font-size);
font-weight: var(--font-weight);
margin: 32px;
}
我们在.parent 中定义的变量可以在子级的任意使用。
最终的效果如下：
变量的备用值
CSS的var()函数可以接受两个参数，第一个作为他的值，第二个参数作为其备用值，备用值在第一个值失效的时候使用。
这个函数只能接受两个参数，第一个参数为变量的名称，第二个参数为备用值，但是如果大于两个参数得话，第一个逗号,后面的的参数会作为一个参数使用。
第二个参数是可以进行嵌套的，示例代码如下：
.first {
/* 当前文字的颜色为red，因为--color不在当前元素内，也不再当前父元素内 */
color: var(--color, red);
/* 当前文字的颜色为--main-text-color，如果--main-text-color不存在时，文字颜色为red */
color: var(--color, var(--main-text-color, red));
/* 当前文字的颜色为 red,white ，所以说var()只可以使用两个参数 */
color: var(--color, red, white);
}
HTML代码如下：
<h1 class="first">彼岸繁華</h1>
通过JS获取和设置CSS变量
通过JavaScript获取和设置JavaScript变量的具体步骤如下，
-
获取指定DOM节点
-
通过
getComputedStyle()方法获取当前DOM节点的CSSStyleDeclaration对象 -
通过
CSSStyleDeclaration.getPropertyValue(变量名/属性名)获取指定的变量值 -
通过
Element.style.setProperty()修改或者设置一个变量的值
实现代码如下：
// 1
const child = document.getElementById('child')
// 2 3
let color = getComputedStyle(child).getPropertyValue('--color')
console.log(color) // #FF6A00
// 4
child.style.setProperty('--color', '#eeeccc')
color = getComputedStyle(child).getPropertyValue('--color')
console.log(color) // #eeeccc
总结
CSS原生支持变量可以帮助我们解决一些问题，最要的的就是CSS中的一些值得复用，例如颜色之类的。还有就是通过Less或者Cass解决不了的问题，例如我们的这个字体颜色是从服务端获取的，需要通过CSS的方式为其设置字体颜色，这样的话使用Less或者Sass解决基本是不可能的，但是有个这个东西就很好的帮助了我们解决这些问题。
掌握了原生的CSS变量配合Less或者Sass可以在开发中完成一些之前做不到的效果。
精彩文章
【从头学前端】04-搞懂JavaScript中的基本数据类型
