鳕鱼天空

This is Mr Wang's Tech Blog.

CSS var() 函数 伪代码 变量(包含微信小程序写法)

通过动态绑定style,声明css变量"--bgColor",把变量”color”赋给“--bgColor”

HTML:

<div ref="chart-circle" class="chart-circle" :style="{ '--bgColor': color }"></div>

微信小程序:

<view  class="chart-circle" style="--bgColor:{{color}}"></view>
.chart-circle {
  width: 80px;
  height: 80px;
  position: relative;
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--bgColor);
  }
}

w3shool中演示