扩展引导4裕度调整

Question

我在sass(scss file)中使用引导程序4，并希望将.mx-2类属性应用到一个新的类中。从理论上说是这样的：

.MyCustomClass{
  @extend .mx-2;
}

但是显然，编译器找不到.mx-2选择器，而且它失败了。我知道mx-2类是使用$size、$length、$spacers、$breakpoint等的混合物创建的。所以我改变了它：

.MyCustomClass{
  margin-left: ($spacer * .5) !important;
  margin-right: ($spacer * .5) !important;
}

我想知道：

1. 如果有更好、更整洁的方法去做这件事呢？
2. 如果我能用一些变量来代替.5呢？
3. 如果我想扩展另一个大小调整类，如：.mx-lg-2

Answer 1

“但是很明显，编译器找不到..mx 2选择器，结果失败了.”

它应该工作，但您需要首先@import "bootstrap"。任何@extend都应该在进口之后.

@import "bootstrap";

.MyCustomClass{
  @extend .mx-2;
}

演示：https://www.codeply.com/go/UHzJirtyju

How to extend/modify (customize) Bootstrap 4 with SASS