Hello 大家好，我是此岸繁華，一个想进大厂的大三学生，为了有一个残缺的前端常识体系，当初我要从头开始学习、梳理、总结。

编写不易转载请取得容许

写在后面

在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变量的具体步骤如下，

  1. 获取指定DOM节点
  2. 通过getComputedStyle()办法获取以后DOM节点的CSSStyleDeclaration对象
  3. 通过CSSStyleDeclaration.getPropertyValue(变量名/属性名)获取指定的变量值
  4. 通过Element.style.setProperty() 批改或者设置一个变量的值

实现代码如下：

// 1const child = document.getElementById('child')// 2 3let color = getComputedStyle(child).getPropertyValue('--color')console.log(color) // #FF6A00// 4child.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中的根本数据类型

【从头学前端】03-这次我就搞懂了JavaScript中的变量

【从头学前端】02-JavaScript词法构造

【从头学前端】01-什么是JavaScript