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

【问题标题】：Create variably custom classes using bootstrap theme-colors使用引导主题颜色创建可变自定义类
【发布时间】：2020-09-01 22:59:37
【问题描述】：

（这里是漂亮的绿色 scss/bootstrap 用户）所以，就像 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 失败并不能正确编译并让我报错......“错误：未定义的 mixin”

我怀疑它是从某个地方丢失的左边框颜色变体，但我不知道在哪里。

我错过了什么或做错了什么？

谢谢

【问题讨论】：

很难说你错过了什么。您还没有提供太多可供参考的代码。

标签： sass mixins scss-mixins

【解决方案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 文件中的那种颜色。以“primary”和“success”为例。

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

【讨论】：