擴展Bootstrap 4和SASS

Question

由於Bootstrap最近才正式發布，因此仍需要處理一些頁面（ https://getbootstrap.com/docs/4.0/extend/ - todo：整個頁面 ）。

我對sass / scss完全不熟悉所以這可能很容易。 我想要做的是創建一個完整的類，它與bootstrap中的所有預配置樣式一起使用。

例如，我怎樣才能創建一個.drop-shadow類，它將實現所有顏色（以及最終的其他設置），如.drop-shadow-primary ， 。drop-shadow-secondary等。

Answer 1

可以通過迭代這樣的Bootstrap 4 theme-colors()映射來完成...

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