Spacing extension for Bulma.io (CSS Framework)

spacing.scss

/*
 * A spacing extension to Bulma.io
 *
 * This extension implements rules likes:
 * has-margin-none, has-padding-medium, has-margin-bottom-large, has-margin-auto
 *
 * The classes are built as follows (in rem):
 *
 * has-margin
 *     -(*|top|right|bottom|left)
 *         -(none|extra-small|very-small|small|medium|large|very-large|extra-large)
 * has-padding
 *     -(*|top|right|bottom|left)
 *         -(none|extra-small|very-small|small|medium|large|very-large|extra-large)
 * has-margin
 *     -(*|left|right)
 *         -auto
 */

$sizeUnit: rem;
$marginKey: "has-margin";
$paddingKey: "has-padding";
$separator: "-";
$spacingSizes: (
  ("none", 0),
  ("extra-small", 0.125),
  ("very-small", 0.25),
  ("small", 0.5),
  ("medium", 1),
  ("large", 2),
  ("very-large", 4),
  ("extra-large", 8)
);
$positions: (
  ("top", "top"),
  ("right", "right"),
  ("bottom", "bottom"),
  ("left", "left")
);

@function sizeValue($key, $value) {
  @return if($key == "none", 0, $value + $sizeUnit);
}

@each $size in $spacingSizes {
  $sizeKey: nth($size, 1);
  $sizeValue: nth($size, 2);
  .#{$marginKey}#{$separator}#{$sizeKey} {
    margin: sizeValue($sizeKey, $sizeValue);
  }
  .#{$paddingKey}#{$separator}#{$sizeKey} {
    padding: sizeValue($sizeKey, $sizeValue);
  }
}

@each $size in $spacingSizes {
  $sizeKey: nth($size, 1);
  $sizeValue: nth($size, 2);
  @each $position in $positions {
    $posKey: nth($position, 1);
    $posValue: nth($position, 2);
    .#{$marginKey}#{$separator}#{$posKey}#{$separator}#{$sizeKey} {
      margin-#{$posValue}: sizeValue($sizeKey, $sizeValue);
    }
    .#{$paddingKey}#{$separator}#{$posKey}#{$separator}#{$sizeKey} {
      padding-#{$posValue}: sizeValue($sizeKey, $sizeValue);
    }
  }
}

.has-margin-auto {
    margin-left: auto;
    margin-right: auto;
}

.has-margin-left-auto {
    margin-left: auto;
}

.has-margin-right-auto {
    margin-right: auto;
}