Spacing

bootstrap-spacers.scss

// SCSS Spacing Helpers
//
// update 060519
// @rob.kistner
//
// based on Bootstrap 4's spacing helpers utilities
//

$spacer: 1rem;
$spacers: (
  0: 0,
  xs: $spacer * 0.25,
  sm: $spacer * 0.5,
  md: $spacer * 1,
  lg: $spacer * 2,
  xl: $spacer * 4,
  xxl: $spacer * 8
);

$dirs: (
  t: "top",
  r: "right",
  b: "bottom",
  l: "left"
);

$atts: (
  m: "margin",
  p: "padding"
);

/*
  spacing helpers
----------------------------------------------------*/

// loop: margin & padding
@each $att-key, $att-val in $atts {

  // loop: top, right, bottom, left directions
  @each $dir-key, $dir-val in $dirs {
  
    // loop: spacing values
    @each $sp-key, $sp-val in $spacers {
      .#{$att-key}#{$dir-key}-#{$sp-key} {
        #{$att-val}-#{$dir-val}: #{$sp-val};
      }
    }
  }
  
  // loop: spacing values for all, vertical, horizontal
  @each $sp-key, $sp-val in $spacers {
    .#{$att-key}-#{$sp-key} {
      #{$att-val}: #{$sp-val};
    }
    .#{$att-key}x-#{$sp-key} {
      #{$att-val}-left: #{$sp-val};
      #{$att-val}-right: #{$sp-val};
    }
    .#{$att-key}y-#{$sp-key} {
      #{$att-val}-top: #{$sp-val};
      #{$att-val}-bottom: #{$sp-val};
    }
  }
}

spacing-helpers-var.css

/* -----------------------------------------
  Spacing Helpers

  variable version
------------------------------------------*/
:root {
  --spacing-0: 0;
  --spacing-1: 0.125rem;
  --spacing-2: 0.25rem;
  --spacing-3: 0.5rem;
  --spacing-4: 1rem;
  --spacing-5: 2rem;
  --spacing-6: 4rem;
  --spacing-7: 8rem;
}


/* margin */

.m-0  { margin: var(--spacing-0); }
.mt-0 { margin-top: var(--spacing-0); }
.mr-0 { margin-right: var(--spacing-0); }
.mb-0 { margin-bottom: var(--spacing-0); }
.ml-0 { margin-left: var(--spacing-0); }
.my-0 { margin-top: var(--spacing-0); margin-bottom: var(--spacing-0); }
.mx-0 { margin-left: var(--spacing-0); margin-right: var(--spacing-0); }

.m-1  { margin: var(--spacing-1); }
.mt-1 { margin-top: var(--spacing-1); }
.mr-1 { margin-right: var(--spacing-1); }
.mb-1 { margin-bottom: var(--spacing-1); }
.ml-1 { margin-left: var(--spacing-1); }
.my-1 { margin-top: var(--spacing-1); margin-bottom: var(--spacing-1); }
.mx-1 { margin-left: var(--spacing-1); margin-right: var(--spacing-1); }

.m-2  { margin: var(--spacing-2); }
.mt-2 { margin-top: var(--spacing-2); }
.mr-2 { margin-right: var(--spacing-2); }
.mb-2 { margin-bottom: var(--spacing-2); }
.ml-2 { margin-left: var(--spacing-2); }
.my-2 { margin-top: var(--spacing-2); margin-bottom: var(--spacing-2); }
.mx-2 { margin-left: var(--spacing-2); margin-right: var(--spacing-2); }

.m-3  { margin: var(--spacing-3); }
.mt-3 { margin-top: var(--spacing-3); }
.mr-3 { margin-right: var(--spacing-3); }
.mb-3 { margin-bottom: var(--spacing-3); }
.my-3 { margin-top: var(--spacing-3); margin-bottom: var(--spacing-3); }
.mx-3 { margin-left: var(--spacing-3); margin-right: var(--spacing-3); }

.m-4  { margin: var(--spacing-4); }
.mt-4 { margin-top: var(--spacing-4); }
.mr-4 { margin-right: var(--spacing-4); }
.mb-4 { margin-bottom: var(--spacing-4); }
.ml-4 { margin-left: var(--spacing-4); }
.my-3 { margin-top: var(--spacing-4); margin-bottom: var(--spacing-4); }
.mx-3 { margin-left: var(--spacing-4); margin-right: var(--spacing-4); }

.m-5  { margin: var(--spacing-5); }
.mt-5 { margin-top: var(--spacing-5); }
.mr-5 { margin-right: var(--spacing-5); }
.mb-5 { margin-bottom: var(--spacing-5); }
.ml-5 { margin-left: var(--spacing-5); }
.my-5 { margin-top: var(--spacing-5); margin-bottom: var(--spacing-5); }
.mx-5 { margin-left: var(--spacing-5); margin-right: var(--spacing-5); }

.m-6  { margin: var(--spacing-6); }
.mt-6 { margin-top: var(--spacing-6); }
.mr-6 { margin-right: var(--spacing-6); }
.mb-6 { margin-bottom: var(--spacing-6); }
.ml-6 { margin-left: var(--spacing-6); }
.my-6 { margin-top: var(--spacing-6); margin-bottom: var(--spacing-6); }
.mx-6 { margin-left: var(--spacing-6); margin-right: var(--spacing-6); }

.m-7  { margin: var(--spacing-7); }
.mt-7 { margin-top: var(--spacing-7); }
.mr-7 { margin-right: var(--spacing-7); }
.mb-7 { margin-bottom: var(--spacing-7); }
.ml-7 { margin-left: var(--spacing-7); }
.my-7 { margin-top: var(--spacing-7); margin-bottom: var(--spacing-7); }
.mx-7 { margin-left: var(--spacing-7); margin-right: var(--spacing-7); }


/* padding */

.p-0  { padding: var(--spacing-0); }
.pr-0 { padding-right: var(--spacing-0); }
.pb-0 { padding-bottom: var(--spacing-0); }
.pt-0 { padding-top: var(--spacing-0); }
.pl-0 { padding-left: var(--spacing-0); }
.py-0 { padding-top: var(--spacing-0); padding-bottom: var(--spacing-0); }
.px-0 { padding-left: var(--spacing-0); padding-right: var(--spacing-0); }

.p-1  { padding: var(--spacing-1); }
.pt-1 { padding-top: var(--spacing-1); }
.pr-1 { padding-right: var(--spacing-1); }
.pb-1 { padding-bottom: var(--spacing-1); }
.pl-1 { padding-left: var(--spacing-1); }
.py-1 { padding-top: var(--spacing-1); padding-bottom: var(--spacing-1); }
.px-1 { padding-left: var(--spacing-1); padding-right: var(--spacing-1); }

.p-2  { padding: var(--spacing-2); }
.pt-2 { padding-top: var(--spacing-2); }
.pr-2 { padding-right: var(--spacing-2); }
.pb-2 { padding-bottom: var(--spacing-2); }
.pl-2 { padding-left: var(--spacing-2); }
.py-2 { padding-top: var(--spacing-2); padding-bottom: var(--spacing-2); }
.px-2 { padding-left: var(--spacing-2); padding-right: var(--spacing-2); }

.p-3  { padding: var(--spacing-3); }
.pt-3 { padding-top: var(--spacing-3); }
.pr-3 { padding-right: var(--spacing-3); }
.pb-3 { padding-bottom: var(--spacing-3); }
.ml-3 { margin-left: var(--spacing-3); }
.pl-3 { padding-left: var(--spacing-3); }
.py-3 { padding-top: var(--spacing-3); padding-bottom: var(--spacing-3); }
.px-3 { padding-left: var(--spacing-3); padding-right: var(--spacing-3); }

.p-4  { padding: var(--spacing-4); }
.pt-4 { padding-top: var(--spacing-4); }
.pr-4 { padding-right: var(--spacing-4); }
.pb-4 { padding-bottom: var(--spacing-4); }
.pl-4 { padding-left: var(--spacing-4); }
.py-4 { padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); }
.px-4 { padding-left: var(--spacing-4); padding-right: var(--spacing-4); }

.p-5  { padding: var(--spacing-5); }
.pt-5 { padding-top: var(--spacing-5); }
.pr-5 { padding-right: var(--spacing-5); }
.pb-5 { padding-bottom: var(--spacing-5); }
.pl-5 { padding-left: var(--spacing-5); }
.py-5 { padding-top: var(--spacing-5); padding-bottom: var(--spacing-5); }
.px-5 { padding-left: var(--spacing-5); padding-right: var(--spacing-5); }

.p-6  { padding: var(--spacing-6); }
.pt-6 { padding-top: var(--spacing-6); }
.pr-6 { padding-right: var(--spacing-6); }
.pb-6 { padding-bottom: var(--spacing-6); }
.pl-6 { padding-left: var(--spacing-6); }
.py-6 { padding-top: var(--spacing-6); padding-bottom: var(--spacing-6); }
.px-6 { padding-left: var(--spacing-6); padding-right: var(--spacing-6); }

.p-7  { padding: var(--spacing-7); }
.pt-7 { padding-top: var(--spacing-7); }
.pr-7 { padding-right: var(--spacing-7); }
.pb-7 { padding-bottom: var(--spacing-7); }
.pl-7 { padding-left: var(--spacing-7); }
.py-7 { padding-top: var(--spacing-7); padding-bottom: var(--spacing-7); }
.px-7 { padding-left: var(--spacing-7); padding-right: var(--spacing-7); }

060519: SASS Version Update

Changed from tabs to spaces