css div自定义属性,CSS 自定义属性 - 入门

引言

CSS语言是一种声明式语言，不像其他语言有变量、条件和逻辑等特性，因为这个原因，社区中有了各种CSS处理器语言，比如Sass、LESS和Stylus等。这些处理器语言引入了一些类似其他程序语言的特性，比如变量、运算符和逻辑运算等。

虽然CSS处理器给编写和维护CSS带来了一些便利，但是需要额外的编译，所以社区开始将CSS处理器中的变量引入到原生CSS中，最后形成了今天的CSS自定义属性。

一、CSS 自定义属性简介

由CSS作者(CSSer)自己定义的属性，统称为自定义属性。它允许作者自由的选择名称，自由的为名称属性分配任意值。这些属性能够提供给var()函数使用，被var()函数引用的自定义属性又常被称为变量。

这样一来，CSSer声明的这些自由属性就有了两个名称：自定义属性 和 变量：

自定义属性：使用两个连词线 -- 声明的特殊格式作为名称，该名称被称为自定义属性，同时可以给自定义属性赋予任何值。比如 --color: #fff 。

变量：CSS的 var() 函数引用的自定义属性被称为变量。var() 会返回自定义属性所对应的值，同时可以被运用于相应的CSS属性。对应的即是CSS规则中的属性值。

用一张图来描述他们之间的关系：

二、CSS自定义属性的作用

当我们的项目中有很多CSS文件时，无形中增加了维护成本。即便使用了CSS框架，虽然这些框架都有可能引入了Sass这样的CSS处理器帮助我们减少了出错的机会，提高了可维护性的能力，但这种通过添加额外步骤的方式(需要做编译处理)，可能会增加系统的复杂性。

CSS自定义属性的出现，为我们带来了一些CSS处理器的便利，并且不需要额外的编译。在CSS中使用CSS自定义属性的好处和在编写语言中使用变量的好处没有特别的不同之处。W3C规范上有过这样的一段描述：

使用CSS自定义属性使得大文件更易于阅读，因为看起来很随意的值有了一个提示信息的名字，并且编辑这些文件更加简单，更不易于出错。因为你只需要在自定义属性处修改一次，这个修改就会应用到使用该自定义属性的任何地方。