Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v3.1.0)
// ----

// We are generating this in forceBase.scss:
$spacing-xxx-small: 0.125rem;
$spacing-xx-small: 0.25rem;
$spacing-x-small: 0.5rem;
$spacing-small: 0.75rem;
$spacing-medium: 1rem;
$spacing-large: 1.5rem;
$spacing-x-large: 2rem;



// We are also generating this in forceBase.map.scss:
$force-base-map: (
  "spacing-xxx-small": 0.125rem,
  "spacing-xx-small": 0.25rem,
  "spacing-x-small": 0.5rem,
  "spacing-small": 0.75rem,
  "spacing-medium": 1rem,
  "spacing-large": 1.5rem,
  "spacing-x-large": 2rem,
  "color-text-default": rgb(22, 50, 92),
  "color-text-weak": rgb(84, 105, 141),
  "line-height-heading": 1.25,
  "line-height-text": 1.5,
);

@mixin properties-that-match($match, $map, $property, $prefix, $position) {
  @each $key, $value in $map {
    @if str-index($key, $match) {
      $size: str-slice($key, str-length($match) + str-index($key, $match));
      .#{$prefix}-#{$position}-#{$size} {
        #{$property}: $value;
      }
    }
  }
}

// Here is the mixin I wrote, using the top variables.
// But I'd rather pull it from the map so I don't have to rewrite the map in my mixin.
@mixin spacing($spacing-type, $map, $spacing-prefix: null) {

  $spacing-positions: top right bottom left;

  @each $position in $spacing-positions {
    @include properties-that-match('spacing', $map, "#{$spacing-type}-#{$position}", $spacing-prefix, $position);
  }
}



@include spacing(margin, $force-base-map, $spacing-prefix:'m');
@include spacing(padding, $force-base-map, $spacing-prefix:'p');

SassMeister-output.css

.m-top--xxx-small {
  margin-top: 0.125rem; }

.m-top--xx-small {
  margin-top: 0.25rem; }

.m-top--x-small {
  margin-top: 0.5rem; }

.m-top--small {
  margin-top: 0.75rem; }

.m-top--medium {
  margin-top: 1rem; }

.m-top--large {
  margin-top: 1.5rem; }

.m-top--x-large {
  margin-top: 2rem; }

.m-right--xxx-small {
  margin-right: 0.125rem; }

.m-right--xx-small {
  margin-right: 0.25rem; }

.m-right--x-small {
  margin-right: 0.5rem; }

.m-right--small {
  margin-right: 0.75rem; }

.m-right--medium {
  margin-right: 1rem; }

.m-right--large {
  margin-right: 1.5rem; }

.m-right--x-large {
  margin-right: 2rem; }

.m-bottom--xxx-small {
  margin-bottom: 0.125rem; }

.m-bottom--xx-small {
  margin-bottom: 0.25rem; }

.m-bottom--x-small {
  margin-bottom: 0.5rem; }

.m-bottom--small {
  margin-bottom: 0.75rem; }

.m-bottom--medium {
  margin-bottom: 1rem; }

.m-bottom--large {
  margin-bottom: 1.5rem; }

.m-bottom--x-large {
  margin-bottom: 2rem; }

.m-left--xxx-small {
  margin-left: 0.125rem; }

.m-left--xx-small {
  margin-left: 0.25rem; }

.m-left--x-small {
  margin-left: 0.5rem; }

.m-left--small {
  margin-left: 0.75rem; }

.m-left--medium {
  margin-left: 1rem; }

.m-left--large {
  margin-left: 1.5rem; }

.m-left--x-large {
  margin-left: 2rem; }

.p-top--xxx-small {
  padding-top: 0.125rem; }

.p-top--xx-small {
  padding-top: 0.25rem; }

.p-top--x-small {
  padding-top: 0.5rem; }

.p-top--small {
  padding-top: 0.75rem; }

.p-top--medium {
  padding-top: 1rem; }

.p-top--large {
  padding-top: 1.5rem; }

.p-top--x-large {
  padding-top: 2rem; }

.p-right--xxx-small {
  padding-right: 0.125rem; }

.p-right--xx-small {
  padding-right: 0.25rem; }

.p-right--x-small {
  padding-right: 0.5rem; }

.p-right--small {
  padding-right: 0.75rem; }

.p-right--medium {
  padding-right: 1rem; }

.p-right--large {
  padding-right: 1.5rem; }

.p-right--x-large {
  padding-right: 2rem; }

.p-bottom--xxx-small {
  padding-bottom: 0.125rem; }

.p-bottom--xx-small {
  padding-bottom: 0.25rem; }

.p-bottom--x-small {
  padding-bottom: 0.5rem; }

.p-bottom--small {
  padding-bottom: 0.75rem; }

.p-bottom--medium {
  padding-bottom: 1rem; }

.p-bottom--large {
  padding-bottom: 1.5rem; }

.p-bottom--x-large {
  padding-bottom: 2rem; }

.p-left--xxx-small {
  padding-left: 0.125rem; }

.p-left--xx-small {
  padding-left: 0.25rem; }

.p-left--x-small {
  padding-left: 0.5rem; }

.p-left--small {
  padding-left: 0.75rem; }

.p-left--medium {
  padding-left: 1rem; }

.p-left--large {
  padding-left: 1.5rem; }

.p-left--x-large {
  padding-left: 2rem; }