CSS Variables

前言：

代码更具可读性：使用CSS变量（自定义属性）可以让代码变得更具可读性和可维护性。

在大型项目中易于修改：将所有常量保存在一个单独的文件中，利于维护

CSS变量（自定义属性）的出现，让我们可以在CSS中使用原生的变量，而不再需要借助于类似Sass这样的CSS处理器。

那CSS变量与CSS预处理器（Less、Sass）相比较呢？

CSS 变量的动态性，能在页面运行时更改，而传统预处理器变量编译后无法更改

CSS 变量能够继承，能够组合使用，具有作用域

配合 Javascript 使用，方便JS操作

---

CSS自定义属性声明

在CSS中，一个CSS自定义属性是以两个破折号（--）开始的任何名称

由自定义属性标记设定值（例： --main-color: blue;），由var() 函数来获取值（例： color: var(--main-color);）

至于为啥要用“--”  ：   "$"是属于Sass的语法，  "@"是属于Less的语法， 为避免冲突 css变量使用"--"

---

CSS自定义属性作用域 

在JavaScript中，变量是有作用域一说。它们可能是全局作用域，也有可能是局部作用域。

那么在CSS中，CSS自定义属性也有这样的说法，自定义属性受级联的约束，并从其父级继承其值。例：

:root { 
    --color: black; /* 全局作用域*/ 
}
.block { 
    color: #8cacea; 
    --color: blue; /* 局部作用域；此处`--color`作用域是`.block`选择器 */ 
}

:root选择器可以选择到DOM元素中或document树中最高顶级的元素。

因此，在:root选择器是声明的CSS自定义属性，其作用域的范围是全局范围，也就是全局作用域。

明白了？那就继续！

---

使用CSS自定义属性

在CSS中使用已声明的CSS自定义属性时，需要通过var()函数来引用。例：

:root { 
    --font-size: 22px; /* 声明一个全局使用域的CSS自定义属性 */ 
} 
.test { 
    font-size: var(--font-size); /* 通过var()函数调用已声明的CSS自定义属性--font-size */ 
}

CSS自定义属性值运算

CSS自定义属性不像Sass（或其他CSS处理器）中，可以在许多地方使用变量，并且可以进行一些数学运算。

在使用CSS自定义属性时，只能在CSS属性值中使用CSS自定义属性或对属性值进行运算

body { 
    --space: calc(20px * 2); 
    height: var(--space);   // height: 40px;
}

CSS自定义属性值与JS的来往

:root{
  --height:50px;
}

//  读取
var root = getComputedStyle(document.documentElement);  // 50px
 
// 写入
document.documentElement.style.setProperty('--height', '100px');  // 100px

// 删除
document.documentElement.style.removeProperty('--height');  // 50px

注意注意

CSS自定义属性是区分大小写的

/* 这里定义了两个不同的CSS自定义属性 */ 
:root { 
    --color: red; 
    --COLOR: blue; 
}

还有一个最重要的就是兼容性问题啦！

除了 IE 外主流浏览器的最新版都已经支持这个特性了，

包括 EdgeHTML 15.15061中已经增加了对CSS自定义属性的支持！