увеличить начальную загрузку на 4 размера

Question

Я использую bootstrap 4 с sass (scss file) и хочу применить свойства класса .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

---

Как расширить / изменить (настроить) Bootstrap 4 с помощью SASS