扩展 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屋!