3

So here's kind of a weird thing with the custom.scss file in bootstrap that I discovered tonight and wondering if I am missing something. Let's say I set the color $blue to a custom value (#000 in this case just to make it easy to read) and remove the !default flag in _custom.scss as I'm supposed to. In the _variables.scss file, the color $brand-primary is set to $blue, with a !default flag. Then, the $btn-primary-bg is set to $brand-primary, also with a !default flag. So, my thinking is if I set:

$blue: #000000;

in the custom.scss file, it should then cascade down to any variable using $blue, making it so that:

$brand-primary: $blue; set to #000 and then
$btn-primary-bg: $brand-primary; also set to #000000

Well, turns out I have to list all 3 of those instances in the custom sass file and remove their !default flag before they would change to the custom color.

So instead of my custom sheet just having one line 

$blue: #000000;

it needs to be

$blue: #000000 ;
$brand-primary:  $blue;
$btn-primary-bg: $brand-primary;

before that custom color gets applied to those classes.

Am I missing something here? Shouldn't we just have to set the custom color once and then any variable referencing it would also reference that custom color? Seems inefficient to me at this point.

user2654108
  • 365
  • 1
  • 4
  • 6

2 Answers2

0

[enter link description here][1]There is no problem with the variables have been defined. Probably you need to change the way you have used them in HTML. Have a look at below example which has been provided based on your defined variables. I would suggest remove "$blue" variable and define the color directly for "$brand-primary" variable!

[1]: https://jsfiddle.net/negin/t36ep4e8/
Negin
  • 2,332
  • 17
  • 22
0
$colors: (
   $blue: #000000 ;
)

You could use mixins to make it alot easier

@mixin color-modifiers($attribute) {
  @each $name, $hex in $colors {
    &-#{$name} {
      #{$attribute}: $hex !important;
    }
  }
}

.text {
  @include color-modifiers(color);
}

.bg {
  @include color-modifiers(background-color);
}

Then you would just add the class .text-blue or .bg-blue

Lisa Thompson
  • 1