使用 bootstrap 主题颜色创建可变自定义类

Question

（漂亮的绿色 scss/bootstrap 用户在这里）所以，就像 bootstrap btn-{color} 以某种方式在 scss 中编码，这样 btn-primary 和 btn-info 以及 btn-danger 和 btn-warning 等不需要单独编码，我想创建我自己的自定义 class 依赖于所有内置的主题颜色和适应它们在 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 class 一样。

我觉得我很接近，但是将上面的代码添加到我的 scss 失败并不能正确编译并且让我出错... "Error: Undefined mixin"

我怀疑它在某处丢失了 border-left-color-variant，但我不知道在哪里。

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

谢谢

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 文件或 bootstrap 核心导入文件中的每种颜色（即主要、次要、成功、危险、信息、浅色、深色、等 ) 编译器将在您的输出 (yourfile).css 文件中为该颜色创建一个 class 和样式。示例以“初级”和“成功”为例。

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

使用 bootstrap 主题颜色创建可变自定义类

Create variably custom classes using bootstrap theme-colors

sass

mixins

scss-mixins

使用 bootstrap 主题颜色创建可变自定义 类

Create variably custom classes using bootstrap theme-colors

sass

mixins

scss-mixins

使用 bootstrap 主题颜色创建可变自定义类