扩展Bootstrap 4和SASS [英] Extending Bootstrap 4 and SASS

问题描述

由于Bootstrap只是最近才正式发布，因此某些页面仍需要处理( https://getbootstrap.com/docs/4.0/extend/-待办事项:整个页面).

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).

我对sass/scss完全陌生，所以这可能很容易.我想做的是创建一个可与引导程序中所有预配置样式一起使用的整个类.

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.

例如，我如何制作一个 .drop-shadow 类，该类将实现所有颜色(以及最终的其他设置)，如 .drop-shadow-primary ， .drop-shadow-secondary 等.

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.

推荐答案

可以通过迭代Bootstrap 4 theme-colors()映射来完成此操作...

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

另请参阅:如何更改引导程序原色?

这篇关于扩展Bootstrap 4和SASS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！