extend bootstrap 4 margin sizing

Question

I'm using bootstrap 4 with sass(scss file), and want to apply .mx-2 class properties into a new class. theorytically some thing like:

.MyCustomClass{
  @extend .mx-2;
}

But apparently, compiler cannot find .mx-2 selector and it fails. I know that mx-2 class created by using mixture of $size, $length, $spacers ,$breakpoint etc... So i changed it:

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

I'm wondering to know:

1. If there is a better, neater way to do that?
2. If i can replace .5 with some variable?
3. What if i want to extend another sizing class like: .mx-lg-2?

Answer 1

"But apparently, compiler cannot find .mx-2 selector and it fails."

It should work, but you need to @import "bootstrap" first. Any @extend should be after the import...

@import "bootstrap";

.MyCustomClass{
  @extend .mx-2;
}

Demo: https://www.codeply.com/go/UHzJirtyju

---

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