css - Extending Bootstrap 4 and SASS

Question

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.

Answer 1

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?