css 使用变量

一、变量的声明 （变量值只能用作属性值，不能用作属性名，如果变量值带有单位，就不能写成字符串）

　body {

   --foo: #7F583F;

　　 --bar: #F7EFD2;

 }

上面代码中，body选择器里面声明了两个变量：--foo和--bar。

你可能会问，为什么选择两根连词线（--）表示变量？因为$foo被 Sass 用掉了，@foo被 Less 用掉了。为了不产生冲突，官方的 CSS 变量就改用两根连词线了。

变量名大小写敏感，--header-color和--Header-Color是两个不同变量。

二、var() 函数

var()函数用于读取变量。

 

　a {

  color: var(--foo);

  text-decoration-color: var(--bar);
}

var()函数还可以使用第二个参数，表示变量的默认值。
如果该变量不存在，就会使用这个默认值。
第二个参数不处理内部的逗号或空格，都视作参数的一部分。

color: var(--foo, #7F583F);

var(--font-stack, "Roboto", "Helvetica");

var(--pad, 10px 15px 20px);

例：

<div class="cs" ref="cs" style="width:100px;height:100px;"> </div>

 

使用setProperty动态修改css变量的值

 this.$refs.cs.style.setProperty('--a','red')

 

<style>

:root{

  --a:blue，

  --b:20px

}

.cs{

  background:var(--a),

　font-size:var(--b)

}

</style>