CSS 变量是由网页的作者或用户定义的实体，用来指定文档中的特定变量。使用自定义属性来设置变量名，并使用特定的 var() 来访问。

CSS中原生的变量定义语法是：--*，变量使用语法是：var(--*)，其中*表示我们的变量名称。关于命名这个东西，各种语言都有些显示，例如CSS选择器不能是数字开头，JS中的变量是不能直接数值的，但是，在CSS变量中，这些限制通通没有。

但是，不能包含$，[，^，(，%等字符，普通字符局限在只要是“数字[0-9]”“字母[a-zA-Z]”“下划线_”和“短横线-”这些组合，但是可以是中文，日文或者韩文。

无论是变量的定义和使用只能在声明块{}里面

html:

<div class="container"></div>

css: 

:root {
    --main-bg-color: red;
}
.container {
    width: 20px;
    height: 20px;
    background-color: var(--main-bg-color);
}

解决问题：

  • 在网页中维护一个配色方案，意味着一些颜色在CSS文件中多次出现，并被重复使用。当你修改配色方案时，不论是调整某个颜色或完全修改整个配色，都会成为一个复杂的问题，不容出错，而单纯查找替换是远远不够的。
  • 这些变量的第二个优势就是名称本身就包含了语义的信息。CSS 文件变得易读和理解 
:root { --color: purple; }
div { --color: green; }

#alert { --color: red; }

* { color: var(--color); }

<p>我的紫色继承于根元素</p>
<div>我的绿色来自直接设置</div>
<div id='alert'>
  ID选择器权重更高，因此阿拉是红色！
  <p>我也是红色，占了继承的光</p>
</div>
  • 变量也是跟着CSS选择器走的，如果变量所在的选择器和使用变量的元素没有交集，是没有效果的。例如#alert定义的变量，只有id为alert的元素才能享有。如果你想变量全局使用，则你可以设置在:root选择器上；
  • 当存在多个同样名称的变量时候，变量的覆盖规则由CSS选择器的权重决定的，但并无!important这种用法，因为没有必要，!important设计初衷是干掉JS的style设置，但对于变量的定义则没有这样的需求。

CSS属性名不可以走变量 下面是❌的。

body {
    --bc: background-color;    
    var(--bc): #369;
}

如果我们使用的变量没有定义（注意，仅限于没有定义），则使用后面的值作为元素的属性值

.box {
  --1: #369;
}
body {
  background-color: var(--1, #cd0000);
}