Bootstrap 4 mixins for spacing utilities without classes

__why-and-how-to-use.md

Why?

This:

.action {
  @extend .ml-3;
}

will generate the equivalent to this:

.action {
  margin-left: 1rem !important;
}

Ahhh, !important!!1 Noooo

There must be a better way:

.action {
  @include ml(3);
}

Makes:

.action {
  margin-left: 1rem;
}

---

This therefore gets you not-!important, convenient access to the Bootstrap 4 sizings, with a clear path to extraction of inline classes into css. But there are other goodies:

Negative standard sizings

For negative margins of the standard sizes:

@include mr(-2);

margin-right: -0.5rem;

The X and Y conveniences

To set two ends at once without setting the others:

@include px(3);

padding-left: 1rem;
padding-right: 1rem;

Arbitrary sizes

Most useful with the X/Y conveniences, but good with the rest as well:

@include my(2.3em);
@include p(3vh);

margin-top: 2.3em;
margin-bottom: 2.3em;
padding: 3vh;

Auto works as well

@include ml(auto);

margin-left: auto;

A simple function for more complex sass

Useful in calculations or to use standard sizings in other properties. bsize is for "bootstrap size".

border-width: bsize(2);

border-width: 0.5rem;

Does not include: breakpoint variants

Because you should just use the @include media-breakpoint-{up,down,etc} utilities.

_bootstrap-mixins.scss

@function map-get-or-key($map, $key) {
	@if map-has-key($map, $key) or map-has-key($map, -$key) {
		@if $key != 'auto' and type-of($key) == 'number' and $key < 0 {
			@return 0 - map-get($map, -$key);
		} @else {
			@return map-get($map, $key);
		}
	} @else if type-of($key) == 'string' {
		@return unquote($key);
	} @else {
		@return $key;
	}
}

@function bsize($key) {
	@return map-get-or-key($spacers, $key);
}

@mixin m($space) {
	margin: bsize($space);
}

@mixin mt($space) {
	margin-top: bsize($space);
}

@mixin mb($space) {
	margin-bottom: bsize($space);
}

@mixin ml($space) {
	margin-left: bsize($space);
}

@mixin mr($space) {
	margin-right: bsize($space);
}

@mixin p($space) {
	padding: bsize($space);
}

@mixin pt($space) {
	padding-top: bsize($space);
}

@mixin pb($space) {
	padding-bottom: bsize($space);
}

@mixin pl($space) {
	padding-left: bsize($space);
}

@mixin pr($space) {
	padding-right: bsize($space);
}

@mixin mx($space) {
	@include ml($space);
	@include mr($space);
}

@mixin my($space) {
	@include mt($space);
	@include mb($space);
}

@mixin px($space) {
	@include pl($space);
	@include pr($space);
}

@mixin py($space) {
	@include pt($space);
	@include pb($space);
}

This is awesome!
Do you plan to develop it further, with Bootstrap 4 breakpoints system (cf https://getbootstrap.com/docs/4.0/utilities/spacing/#notation, {property}{sides}-{breakpoint}-{size} notation)?

No. See from the usage:

Does not include: breakpoint variants

Because you should just use the @include media-breakpoint-{up,down,etc} utilities.

You're welcome to extend it such for your use, but this is what we've settled on and this version is pretty much final.

So useful! Thank you!

This is exactly what I have been looking for!
Now I can use the BS4 standard spacing nomenclature and sizes (0 thru 5 ) to make my custom classes sync with the BS spacer definitions. And it greatly reduces the amount of SCSS I need to write. Please make your project description more detailed so others can find it

THANK YOU!

Very handy mixin, thanks