CSS自定义属性（CSS变量）的定义和使用

CSS变量，其实标准的名称是CSS自定义属性，但是很多前端切图人员都喜欢将其称为CSS变量。因为CSS的自定义属性和我们在后端语言中使用的“变量”有几分想象，比如，一处定义多处使用，也可以进行变量之间的运算。只不过CSS变量是远没有后端程序语言中的变量强大，不过只要用好“CSS变量”却可以让前端开发工作效率提升很多。

CSS变量技术，使用起来其实很简单，但即便如此，也还是有很多切图仔对此感到熟悉又陌生，究其原因，我想大概还是用的比较少，所谓孰能生巧，任何技术的熟练都得建立在大量实战练习的基础上。接下来我们从CSS变量的优势，如何定义，如何使用三个方面将CSS变量讲清楚。

一、为什么要使用CSS变量

1、提升维护效率

想当初，我们从行内样式过渡到单独CSS文件的时候，也是出于提升前端界面的维护效率。CSS变量也一样，比如我们的网站的主色调是#ff5252，那么必然我们在网页中的多处会调用到该颜色值，假如有一天我们需要为网站更改一种其他的主题，或者我们需要为网站定义多种主题供用户进行切换，那么这个时候，逐一去搜索然后更改这些颜色值，就会非常麻烦。

因此这个时候，CSS变量的优势就凸显出来了，我们只需要更改一处即可。同样这种情况也适用于网页字体等。

2、提升代码语义化

如果我们在网页中要定义一种灰色的背景，颜色值为#f8f8f8。如果我们单纯的写background: #f8f8f8;则会显得平淡无奇，但是如果定义为以下代码，则语义化会强很多。

:root{
    --gray-bg:#f8f8f8;
}
.box{
    background: var(--gray-bg);
}

当然，提升开发效率，使代码更规整也属于CSS变量的优点，相信CSS变量能带给前端开发者的好处不仅只有这么些。

二、如何定义CSS变量

CSS变量定义时，我们需要使用--（两个减号）开头，然后写成自定义的属性，再后跟上具体的属性值即可。要注意的有两点：

1、CSS变量遵循级联继承关系

即元素中所使用的CSS变量，只能在其自身及以上的元素内定义。如果将CSS变量定义在当前元素的子元素中或兄弟元素中，则不会生效。

一般常见的是将CSS变量定义在:root元素中，即可以在整个HTML的文章中使用，相当于我们在前端样式中使用的通用样式，在:root内定义的CSS变量，可以在整个文档中随处使用。

所以在定义CSS变量的时候，一定要注意其继承性。

2、CSS变量大小写敏感

即--big-text和--Big-Text是不同的，会被认为是两个不同的CSS自定义属性。

三、如何使用CSS变量

1、使用var()函数的形式进行调用

格式为：var(CSS变量)，如var(--big-text)；

2、可以设置默认值，且默认值可以继续使用var()函数

默认值也叫备用值，即当CSS变量未定义时，会使用默认值。

格式为：var(CSS变量,，默认值)，如font-size:var(--big-text,'16px')；即，如果在样式表中，我们没有定义CSS变量--big-text，则font-size会取16px做为值。

要注意的是：默认值也可以使用var()函数，var函数可以继续嵌套var()函数。如下代码，当CSS变量--red、--green、--blue都失效的时候，H1最终呈现的效果为橙色

:root{
    //--red:red;
    //--green:green;
    //--blue:blue;
    --orange:orange;
}
h1{
    color: var(--red,var(--green,var(--blue,var(--orange))));
}

3、注意无效的CSS变量

当浏览器遇到无效的CSS变量时，会使用继承自父级的值或者浏览器的默认值来替代。如下代码：

:root{
    --big-size:20px;
}
.box{
    color:orange;
    p{
        color:var(--big-size);
    }
}

我们给color属性，使用了非颜色值的字体大小值，那么这个时候，这里的CSS变量就会被认为是无效变量，浏览器会默认给p元素赋以其父元素.box的字体颜色值。

四、CSS变量与JavaScript的交互

最常见的场景是，点击按钮，切换网页的风格主题。

原生的JavaScript可以通过如下的方法对CSS变量进行修改：

HTML代码：

<p>测试CSS变量的无效值</p>
<button id="button">更改颜色</button>

CSS代码：

:root{ --text-color:red;}
p{ color:var(--text-color);}

JS代码：

let btn = document.getElementById('button'),
    root = document.documentElement;
btn.onclick = function (){
    root.style.setProperty('--text-color','orange')
}

即默认文字颜色为红色，点击按钮后，将全局的--text-color重新定义为橙黄色。

我们还可以借助CSS变量与JS的交互，设置元素的拖动等效果。具体的大家有兴趣的话可以尝试一下。