CSS自定义属性（CSS变量）

前言

sass/less/stylus，让我们的CSS代码保持良好的结构和可维护性。

近年来，一些动态特性开始作为规范的一部分，出现在CSS语言中。我们称之为CSS变量(CSS custom property)。

准备

使用之前我们先看看其兼容性：

🙀 哇哦，已经兼容95%左右的用户了，看来我们几乎可以肆无忌惮的使用了，好了，接下来就让我们一起去了解一下它吧。

语法

Css中使用

在自定义属性前添加双横线前缀，然后像给普通CSS设值一样，给自定义属性设值。

--primary-color: #000;

在上面的代码中，我们给一个叫做--primary-color的自定义属性设置了一个颜色值#000。

属性已经定义好了，那么我们现在就去尝试使用，像这样：

color: var(--primary-color);

全局CSS变量

:root {
    --primary-color: #000;
}

完整的使用方法如下：

:root {
    --primary-color: #000;
}

/* CSS文件的其他部分 */
#div {
    background-color: var(--primary-color);
}

最后，你可以在CSS变量中加入一个或多个备用值:

var(--primary-color, #111);

值的计算（ calc() ）

:root {
    --base-height: 10px;
}

margin: 0 0 calc(var(--base-height, 10px) * 1rem);

*注意：

• 在一些浏览器中，针对CSS变量的复杂calc()可能不能工作。
• 不能使用CSS自定义属性作为CSS属性名称：var(--name): 10px;
• 不能作为媒体查询值使用：@media screen and (min-width: var(--media-min-width){
• 不能作为图片地址使用：url(var(--image-src))

我们可以随时重置/继承变量的值

CSS中自定义属性默认是继承的，通过这个例子，可以消除模块/组件受到的影响

:root {
    --bgcolor: #000;
    --color: #111;
}

.reset {
    --bgcolor: #222;
    --color: #333;
    background: var(--bgcolor);
    color: var(--color);
}

JavaScript中操作CSS变量

假如在你的CSS文件中，有一个叫做--color的变量，作用在.div选择器中，值为#000：

.div {
    --default-color: #fff;
    --color: #000;
}

// READ
const rootStyles = getComputedStyle(document.documentElement)
const varValue = rootStyles.getPropertyValue('--color').trim()

// WRITE 
document.documentElement.style.setProperty('--color', '#111')

下面大家一起来看看使用时的例子：

// GET
alert( getComputedStyle(document.documentElement).getPropertyValue('--screen-category').trim(); );

// SET
document.documentElement.style.setProperty('--color', '#222')

// 或者设置其他的变量以及默认值
document.documentElement.style.setProperty( '--color', 'var(--default-color, #333)' )

检测浏览器是否支持CSS自定义属性的方法：

CSS:

@supports ((--height: 0)) {
    /* 支持的css可以写这里 */
}

@supports (not (--height: 0)) {
    /* 不支持的css可以写这里 */
}

JS:

if (window.CSS && window.CSS.supports && window.CSS.supports('--height', 0)) { 
    alert('支持');
} else {
    alert('不支持');
}

建议

• 定义变量的时候都设置默认值
• 使用浏览器支持检测的方法，开始CSS自定义属性和预处理器的协同使用