Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Bootstrap 4 mixins for spacing utilities without classes

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.

@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);
}
@mel0mani4

This comment has been minimized.

Copy link

@mel0mani4 mel0mani4 commented Jun 11, 2019

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)?

@passcod

This comment has been minimized.

Copy link
Owner Author

@passcod passcod commented Jun 11, 2019

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.

@johnchatel

This comment has been minimized.

Copy link

@johnchatel johnchatel commented Mar 18, 2020

So useful! Thank you!

@jpmorandesign

This comment has been minimized.

Copy link

@jpmorandesign jpmorandesign commented Apr 10, 2020

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!

@ItsVlad

This comment has been minimized.

Copy link

@ItsVlad ItsVlad commented Jun 5, 2020

Very handy mixin, thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment