Question

（此处是相当绿色的scss / bootstrap用户）因此，就像引导btn- {color}在scss中以某种方式编码一样，不需要分别对btn-primary和btn-info以及btn-danger和btn-warning等进行单独编码，我想创建自己的自定义类，该类依赖于所有内置主题颜色并按原样进行适应在html中使用。 HTML示例： <div class="bflag-success"> this div </div> 其中的scss就像

@each $color, $value in $theme-colors { @include border-left-color-variant('.bflag-#{$color}', $value);

因此，每次我使用bflag-success或bflag-danger或bflag-info等时，它都会采用该主题颜色，就像btn类一样。

我觉得我已经接近了，但是将上面的代码添加到我的scss失败会导致无法正确编译并使我着陆于错误...“错误：未定义的混合”

我怀疑它的某处缺少边框左颜色变量，但我不知道在哪里。

我在想什么或做错了什么？

谢谢

Answer 1

我学会了如何做到这一点：

这是将添加到 (yourfile).scss 文件中的语法和示例代码，如下所示的 boostrap 导入：

// Below this import

@import '~bootstrap/scss/bootstrap';

// add this - changing the "bflag" class prefix to whichever you like

@each $color, $value in $theme-colors {
    .bflag-#{$color} {
        background-color: $value !important;
    }
}

然后对于 boostrap scss 文件或引导程序核心导入文件中的每种颜色（即主要、次要、成功、危险、信息、浅色、深色等），编译器将创建一个类和样式对于您的输出 (yourfile).css 文件中的该颜色。以“主要”和“成功”为例。

.bflag-primary {
    background-color: #3490dc;
}
.bflag-success {
    background-color: #38c172;
}

使用引导主题颜色创建可变的自定义类

1 个答案: