sass-spacing-utilities.scss

// You can paste this into https://www.sassmeister.com/ to get the desired output and test it in browser

// ----------------------------------------------------------
//  Variables
// ----------------------------------------------------------

$class-prefix: 'dib';

$breakpoints: (
  768px: sm,
  992px: md,
  1200px: lg,
);

$props: (
  margin: m,
  padding: p,
);

$spacer-default: 1rem;
$spacers: (
  0: 0,
  1: $spacer-default * 0.25,
  2: $spacer-default * 0.5,
  3: $spacer-default * 1,
  4: $spacer-default * 1.5,
  5: $spacer-default * 3,
  auto: auto,
);

// ----------------------------------------------------------
//  Spacing mixins
// ----------------------------------------------------------

//-- spacing-common --//
@mixin spacing-common-utilities {
  @each $prop, $prop-abbrv in $props {
    @each $spacer, $spacer-value in $spacers {
      // to avoid adding padding auto
      @if ($spacer != auto or $prop != 'padding') {
        .#{$class-prefix}-#{$prop-abbrv}-#{$spacer} {
          #{$prop}: $spacer-value !important;
        }
        .#{$class-prefix}-#{$prop-abbrv}t-#{$spacer} {
          #{$prop}-top: $spacer-value !important;
        }
        .#{$class-prefix}-#{$prop-abbrv}r-#{$spacer} {
          #{$prop}-right: $spacer-value !important;
        }
        .#{$class-prefix}-#{$prop-abbrv}b-#{$spacer} {
          #{$prop}-bottom: $spacer-value !important;
        }
        .#{$class-prefix}-#{$prop-abbrv}l-#{$spacer} {
          #{$prop}-left: $spacer-value !important;
        }
        .#{$class-prefix}-#{$prop-abbrv}x-#{$spacer} {
          #{$prop}-right: $spacer-value !important;
          #{$prop}-left: $spacer-value !important;
        }
        .#{$class-prefix}-#{$prop-abbrv}y-#{$spacer} {
          #{$prop}-top: $spacer-value !important;
          #{$prop}-bottom: $spacer-value !important;
        }
      }
    }
  }
}

//-- spacing-responsive --//
@mixin spacing-responsive-utilities {
  @each $breakpoint, $breakpoint-abbrv in $breakpoints {
    @media (min-width: $breakpoint) {
      @each $prop, $prop-abbrv in $props {
        @each $spacer, $spacer-value in $spacers {
          // to avoid adding padding auto
          @if ($spacer != auto or $prop != 'padding') {
            .#{$class-prefix}-#{$prop-abbrv}-#{$breakpoint-abbrv}-#{$spacer} {
              #{$prop}: $spacer-value !important;
            }
            .#{$class-prefix}-#{$prop-abbrv}t-#{$breakpoint-abbrv}-#{$spacer} {
              #{$prop}-top: $spacer-value !important;
            }
            .#{$class-prefix}-#{$prop-abbrv}r-#{$breakpoint-abbrv}-#{$spacer} {
              #{$prop}-right: $spacer-value !important;
            }
            .#{$class-prefix}-#{$prop-abbrv}b-#{$breakpoint-abbrv}-#{$spacer} {
              #{$prop}-bottom: $spacer-value !important;
            }
            .#{$class-prefix}-#{$prop-abbrv}l-#{$breakpoint-abbrv}-#{$spacer} {
              #{$prop}-left: $spacer-value !important;
            }
            .#{$class-prefix}-#{$prop-abbrv}x-#{$breakpoint-abbrv}-#{$spacer} {
              #{$prop}-right: $spacer-value !important;
              #{$prop}-left: $spacer-value !important;
            }
            .#{$class-prefix}-#{$prop-abbrv}y-#{$breakpoint-abbrv}-#{$spacer} {
              #{$prop}-top: $spacer-value !important;
              #{$prop}-bottom: $spacer-value !important;
            }
          }
        }
      }
    }
  }
}

// ----------------------------------------------------------
//  Call the mixins to generate the classes
// ----------------------------------------------------------

@include spacing-common-utilities;
@include spacing-responsive-utilities;