css3原生变量var

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);}