工作中为了适配各种主题，颜色一般都会用引入的变量来设置
比如

.text-name{
  color:$text
}

$text在不同主题下会显示不同颜色

这就有个问题了，如果我在html代码里面想直接用这个变量，会不生效：如下

<div style="color: $text"></div>

这个时候需要修改一下写法，用css原生的var来写

<div style="color: var(--text, #252b3a)"></div>

这样改，颜色就会自动适配主题色了