1

As Bootstrap was only recently officially released some of the pages still need to be worked on ( https://getbootstrap.com/docs/4.0/extend/ - todo: this entire page).

I'm entirely new to sass/scss so this might be easy. What I want to do is create an entire class that works with all the pre-configured styles in bootstrap.

For example, how could I make a .drop-shadow class, that would implement all the colors (and eventually other settings) like .drop-shadow-primary, .drop-shadow-secondary and so on.

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
Julz
  • 157
  • 1
  • 3
  • 9

1 Answers1

3

It could be done by iterating the Bootstrap 4 theme-colors() map like this...

@each $color, $value in $theme-colors {
  .drop-shadow-#{$color} {
    box-shadow: 3px 3px 3px $value;
  }
}

https://www.codeply.com/go/LyLcAK9oHN

Also see: How to change the bootstrap primary color?

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624