css - 有没有办法直接在类属性中使用 bootstrap 5 自定义颜色？

Question

像我们一样：

<span class="text-primary">some text</span>

我想知道是否有办法：

<span class="text-red-300">some text</span>

red-300 是 bootstrap 5 自定义颜色，以下链接中还有其他颜色。 https://getbootstrap.com/docs/5.0/customize/color/

标签： csssasscss-variablesbootstrap-5

Answer 1

没有办法$red-300直接在CSS中使用。只能使用 SASS，因为$red-300它是一个 SASS 变量。

但是，基色也可用作CSS 变量。例如，与和--bs-red相同。所以，它可以用作这样的 CSS 变量......$red$red-500

.text-red-500 {
   color: var(--bs-red);
}

CSS 演示

如果您想将SASS用于$red-300，可以这样完成：

@import "functions";
@import "variables";

.text-red-300 {
    color: $red-300;
}

SASS 演示