css 变量

CSS 变量是 CSS 引入的一个新特性，目前绝大多数浏览器已经支持了，它可以帮助我们用更少的代码写出同样多的样式，大大提高了工作效率，本篇文章将教你如何使用 CSS 变量（css variable）。

变量声明

使用 :root 来声明 css 变量，root 相当于根元素 html，例如声明一个背景颜色为红色的 red 变量,示例如下

:root{
    --red: #f00;
}

如何应用这个变量呢？使用 var() 函数。

div{
    background-color: var(--red);
}

这样，我们就给一个 div 盒子添加了一个属性，即设置它的背景颜色为红色。当然也可以同时定义多个变量，方便使用，注意：变量名对大小写敏感，nav-color 和 Nav-color 是完全不同的变量。

:root{
    --margin-top: 20px;
    --nav-color: #ff0;
    --Nav-color: #fff;
    --transition-duration: .5s;
}

全局变量与局部变量

前面我们在 :root里声明的变量都属于全局变量，也就是可以在 html 包裹下的任一class，id 都可以使用它；除此之外也可以定义局部变量，例如我们在 class 为 left 的 div 下定义局部变量：

.left{
    --left-margin: 60px;
    --left-background-color: #333;
}

这个时候，--left-margin 和 --left-background-color 就只能在 .left 包含下的容器才能使用这两个属性，同样是使用margin:var(--left-margin);来书写。

JavaScript 操作变量

JavaScript 可以操纵 css 变量，例如在 index.js 文件中有如下代码：

var root = document.querySelector(':root');     //获取根元素
var rootStyle = getComputedStyle(root);       //获取元素的 css
var red = rootStyle.getPropertyValue('--left-margin');   //获取 css 的样式值   60px
root.style.setProperty('--left-margin','50px');          //更改样式

响应式布局

由于事先定义好了变量，只需引入就可以使用，这样的话当我们想要修改一个属性值，例如修改某个盒子的背景颜色，只需更改变量的值，就可以全局应用到所有元素中，利用这一特性可以做响应式布局。

:root{
    --bg-color: #fff;
    --height: 1080px;
}
body{
    background-color: var(--bg-color);
    height: var(--height);
}
@media all and (max-width:450px) {
    :root{
        --bg-color: #000;
        --height: auto;
    }
}

上面的代码表示正常宽度下的 body 背景颜色为白色，高度为 1080 像素,而当宽度为 450px 大小的时候，此时 body 的背景颜色就变为了黑色，高度也变成自适应，只需要更改变量的值就可以实现响应，是不是很方便呢？

最后，附上一张 css variables 的浏览器兼容图：

图片来自网络

欢迎关注我的公众号「一个学前端的码农」。

扫一扫关注