时至今日，CSS自定义属性对于CSS而言不是什么新特性了，它也被纳入到W3C的规范中，即CSS Custom Properties for Cascading Variables Module Level 1。在《CSS自定义属性》一文中我们对CSS自定义属性（变量）做过全面的介绍，如果你阅读过该文，你应该对CSS自定义属性会有一个基本性的了解以及如何在实际项目中使用该特性。那么再试问一下，你对CSS自定义属性知道多少呢？如果你无法清楚的回答清楚，请继续往下阅读。

CSS自定义属性概要

除了CSS语言之外的其他计算机语言都有变量的概念，但随着CSS预处理器语言的出现，开始引入了变量的概念，随之CSS也引入了变量的概念，但CSS中原生中的变量概念有两种说法：自定义属性 和 变量。

使用--前缀声明的属性被称之为CSS的自定义属性，通过var()函数引用的自定义属性又被称之为CSS的变量！

简而言之，在CSS的世界中，通过--前缀声明的属性既是自定义属性也是变量。

CSS自定义属性的声明

CSS中使用--声明的属性被称为CSS自定义属性：

--customProperty: value

CSS自定义属性的声明和CSS预处理器中的变量的声明有所不同，在CSS中的自定义属性声明必须是在一个CSS选择器区块之中，比如说在根选择器：

:root {
    --customProperty: value
}

也可以是在独立的选择器：

selector {
    --customProperty: value
}

这两种方式不同之处是，在:root{}区块中声明的自定义属性是全局的，而在独立的选择器（非:root）中声明的自定义属性是局部的。

CSS的变量

在CSS中，我们可能在任意的属性中通过var()函数来引用已声明的自定义属性，在这个时候，该自定义属性又被称之为CSS变量。比如：

:root {
    --bgColor: #fff; // 它是一个自定义属性
}

html {
    background-color: var(--bgColor); //bgColor是一个变量
}

CSS自定义属性是动态的

CSS自定义属性和CSS预处理器中的变量还有一个最大的不同之处。那就是CSS自定义属性可以和JavaScript一起操作。换句话说，我们可以使用JavaScript中的.getPropertyValue、.setProperty和.removeProperty三个API对CSS自定义属性进行操作。

• 使用.getPropertyValue可以获取自定义属性的值，比如.getPropertyValue(propertyName)
• 使用.setProperty可以重置自定义属性的值，比如.setProperty(propertyName, value, priority)
• 使用.removeProperty可以删除自定义属性，比如.removeProperty(propertyName)

CSS自定义属性可以用来做一些很酷的事情

CSS的自定义属性和CSS处理器中的变量有着很大的差异性：它不需要经过任何编译就可以在客户端运行，同时JavaScript可以很好的对其自己操作。另外，在实际开发中，CSS自定义属性可以做一些很酷的事情，可能有些事情会感兴趣。

颜色的作用域

最简单和最常见的例子就是颜色的作用域。比如像Bootstrap中的按钮，是通过不同的类名来设置不同的颜色，以区分颜色的作用域：

对于这样的场景，CSS自定义属性具有较高的灵活性和可扩展性，而且代码干净。比如，我们只需要在button中定义颜色所面的自定义属性，比如：

.btn {
    --btnColor: #5eb5ff;
    border: 1px solid var(--btnColor);
    color: var(--btnColor);

    &:hover {
        color: white;
        background-color: var(--btnColor);
    }
}

我们可以在不同的类中简单地改变自定义属性的值：

.btn-red {
    --btnColor: #ff6969;
}

.btn-green {
    --btnColor: #7ae07a;
}

.btn-gray {
    --btnColor: #555;
}

CSS颜色有多种表达方式，比如CSS Color Module Level 3及Level 4中所述，除了颜色关键词还有十六进制、RGB、RGBA、HSL和HSLA等方式来命名一个颜色。其中HSL和HSLA对于程序化的颜色控制有着独特的优势：