简体   繁体   中英

Extending Bootstrap 4 and SASS

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.

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?

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM