扩展Bootstrap 4和SASS

时间:2018-04-10 13:35:07

标签: css twitter-bootstrap sass bootstrap-4

由于Bootstrap最近刚刚正式发布,因此仍需要处理一些页面(https://getbootstrap.com/docs/4.0/extend/ - todo:整个页面)。

我对sass / scss完全不熟悉所以这可能很容易。我想要做的是创建一个适用于bootstrap中所有预配置样式的整个类。

例如,如何创建一个 .drop-shadow 类,它将实现所有颜色(以及最终的其他设置),如 .drop-shadow-primary .drop-shadow-secondary 等。

1 个答案:

答案 0 :(得分:3)

可以通过像这样迭代Bootstrap 4 theme-colors()地图来完成......

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

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

另见:How to change the bootstrap primary color?