Modify a Bootstrap variable within a mixin

Question

Using Bootstrap 4, I'm trying the change the value of brand-primary in a mixin:

// 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"));
    }
}

This compiles without an error but nothing with the classes another-section or yet-another-section are in the compiled css.

Is there a way of overriding brand-primary within a mixin (or any variable)?

What version of Bootstrap are you attempting to modify? There is no `brand-primary` variable in Bootstrap 4? It's just `primary`? — Carol Skelly, Jan 10 '20 at 12:26

score 0 · Answer 1 · answered Jan 10 '20 at 10:32

0

If i understand you correct you want to change the color. All you have to do is override primary color check this link How to change the bootstrap primary color?

answered Jan 10 '20 at 10:32

azermann

43
7

score 0 · Answer 2 · answered Jan 10 '20 at 10:33

0

Take a look here: https://sass-lang.com/documentation/variables#advanced-variable-functions

use map.get($theme-colors, "warning"); instead!

answered Jan 10 '20 at 10:33

Jokova

166
2
5

Modify a Bootstrap variable within a mixin

2 Answers2