CSS 根变量的值不影响 HTML

Question

我正在尝试在home.html 上设置文本颜色。颜色的属性在:root variable 中设置，但在 HTML 页面上不生效。

这是我的代码：

home.scss

:root {
--prim-headclr : #004c3f;
}

/* heading */
.phead_clr{
    color:var(--prim-headclr);
}

home.html

    <div class="col-md-12 phead_clr">
        <h1>Build an online business—no matter what business you’re in</h1>
    </div>

为什么根变量中的给定颜色对 HTML 端没有影响？

Answer 1

将此“phead_clr”类添加到 h1。

<div class="col-md-12">
    <h1 class="phead_clr"> build an online business—no matter what business you’re in</h1>
</div>

***如果css被其他变量或默认变量覆盖，那么你也可以添加important。

:root {
  --prim-headclr : #004c3f !important;
}