CSS：var() 用法

前言

当一个重复被使用的css属性值需要修改时，需要在每一个使用的地方修改一次，显然是很麻烦的。在css3中引入了属性变量和var函数的概念，让css也可以拥有变量。

用法

css自定义变量形式为: --变量名

全局变量

在伪类:root中全局定义，可以作为全局变量使用

:root {
  --primary-color: #1989fa;
}

使用变量：

.box {
    color: var(--primary-color);
}

当变量引用失败后，可以设置自定义默认值

.box1 {
    color: var(--primary-color1, 'blue');
}

局部变量

.box{
   --c-color: #1989fa;
}

在style属性上

<style>
  .item {
    height: var(--h);
    line-height: var(--h);
    ackground-color: #fd7e14;
  }
</style>
<div class="item" style="--h: 40px">1</div>
<div class="item" style="--h: 30px">1</div>
<div class="item" style="--h: 20px">1</div>
<div class="item" style="--h: 10px">1</div>