CSS中的变量CSS中的变量定义在MDN的定义下，CSS变量即自定义属性--*，指的是带有--前缀的属性名，比如--

CSS中的变量

在MDN的定义下，CSS变量即自定义属性--*，指的是带有--前缀的属性名，比如--example,表示的是带有值的自定义属性，其可以通过var函数在全文档范围内使用。

div {
  --somekeyword: left;
  --somecolor: #0000ff;
  --somecomplexvalue: 3px 6px rgb(20, 32, 54);
}

var()函数可以代替元素中任何属性中的值的任何部分。var()函数不能作为属性名、选择器或其他除了属性值之外的值。

方法的第一个参数是要替换的自定义属性的名称，函数的第二个可选参数用作回退值。如果第一个参数引用的自定义参数无效，则该函数将使用第二个值。

和其他语言中的变量一样，css中的变量也有作用域，CSS中变量的作用就是声明该变量的选择器的作用范围。

:root {
  --color: blue; 
}

h1 {
  color: var(--color); // 全局变量
}

h2 {
  --color1: red;
  color: var(--color1);
}

在vue中我们可以绑定style和class来动态的设置属性。

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

data: { activeColor: 'red', fontSize: 30 }

我们可以通过动态的绑定自定义属性以实现在css中使用js变量的目的

<div v-bind:style="{ --color: color}">
  <span>123</span>
</div>

data: { color: 'red' }

span {
  color: var(--color)
}