在 mixin 中修改 Bootstrap 变量答案

【问题标题】：Modify a Bootstrap variable within a mixin在 mixin 中修改 Bootstrap 变量
【发布时间】：2020-04-27 23:40:57
【问题描述】：

使用 Bootstrap 4，我正在尝试在 mixin 中更改 brand-primary 的值：

// variables
$theme-colors: (
  "main": #9fa28b,
  "another-section": #ec008c,
  "yet-another-section": #00b0d8
);

// main scss
@mixin theme($color){
    $theme-colors: (
        "brand-primary": $color
    );
}

body {
    @include theme(theme-color($key: "main"));

    &.another-section {
        @include theme(theme-color($key: "another-section"));
    }

    &.yet-another-section {
        @include theme(theme-color($key: "yet-another-section"));
    }
}

这编译没有错误，但类another-section或yet-another-section在编译的css中没有任何内容。

有没有办法在 mixin（或任何变量）中覆盖 brand-primary？

【问题讨论】：

您尝试修改哪个版本的 Bootstrap？ Bootstrap 4 中没有brand-primary 变量？只是primary？

标签： css sass bootstrap-4 scss-mixins

【解决方案1】：

如果我理解你是正确的，你想改变颜色。您所要做的就是覆盖原色检查此链接How to change the bootstrap primary color?

【讨论】：

【解决方案2】：

看这里： https://sass-lang.com/documentation/variables#advanced-variable-functions

使用 map.get($theme-colors, "warning");而是！

【讨论】：