有没有办法直接在 class 属性中使用 bootstrap 5 自定义颜色? [英] is there a way to use bootstrap 5 custom color directly in the class attribute?

问题描述

像我们一样:

一些文本

我想知道有没有办法:

一些文字

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

red-300 is a bootstrap 5 custom color and there are others in the following link. https://getbootstrap.com/docs/5.0/customize/color/

推荐答案

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

There is no way to use $red-300 directly in CSS. It's only possible using SASS because $red-300 is a SASS variable.

但是，基本颜色也可用作 CSS 变量.例如，--bs-red 与 $red 和 $red-500 相同.因此，它可以像这样用作 CSS 变量...

However, the base colors are also available as CSS variables. For example, --bs-red is the same as $red and $red-500. So, it could be used as a CSS variable like this...

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

CSS 演示

如果您想对 $red-300 使用 SASS，可以这样做:

If you wanted to use SASS for $red-300, it would be done like this:

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

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

SASS 演示

这篇关于有没有办法直接在 class 属性中使用 bootstrap 5 自定义颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！