spacing.scss

spacing.scss

$spacer:   1rem !default;
$spacer-x: $spacer !default;
$spacer-y: $spacer !default;
$spacers: (
  0: (
    x: 0,
    y: 0
  ),
  half: (
    x: ($spacer-x * 0.5),
    y: ($spacer-y * 0.5)
  ),
  1: (
    x: $spacer-x,
    y: $spacer-y
  ),
  2: (
    x: ($spacer-x * 1.5),
    y: ($spacer-y * 1.5)
  ),
  3: (
    x: ($spacer-x * 3),
    y: ($spacer-y * 3)
  ),
  2px: (
    x: 2px,
    y: 2px
  ),
  5px: (
    x: 5px,
    y: 5px
  ),
  10px: (
    x: 10px,
    y: 10px
  ),
  15px: (
    x: 15px,
    y: 15px
  ),
  20px: (
    x: 20px,
    y: 20px
  ),
  30px: (
    x: 30px,
    y: 30px
  ),
  50px: (
    x: 50px,
    y: 50px
  ),
  70px: (
    x: 70px,
    y: 70px
  )
) !default;

@each $prop, $abbrev in (margin: m, padding: p) {
  @each $size, $lengths in $spacers {
    $length-x:   map-get($lengths, x);
    $length-y:   map-get($lengths, y);

    .#{$abbrev}-a-#{$size} { #{$prop}:        $length-y $length-x !important; } // a = All sides
    .#{$abbrev}-t-#{$size} { #{$prop}-top:    $length-y !important; }
    .#{$abbrev}-r-#{$size} { #{$prop}-right:  $length-x !important; }
    .#{$abbrev}-b-#{$size} { #{$prop}-bottom: $length-y !important; }
    .#{$abbrev}-l-#{$size} { #{$prop}-left:   $length-x !important; }

    // Axes
    .#{$abbrev}-x-#{$size} {
      #{$prop}-right:  $length-x !important;
      #{$prop}-left:   $length-x !important;
    }
    .#{$abbrev}-y-#{$size} {
      #{$prop}-top:    $length-y !important;
      #{$prop}-bottom: $length-y !important;
    }

    // mobile

    .#{$abbrev}-a-#{$size}--mobile { @include media($mobile) { #{$prop}:        $length-y $length-x !important; } } // a = All sides
    .#{$abbrev}-t-#{$size}--mobile { @include media($mobile) { #{$prop}-top:    $length-y !important; } }
    .#{$abbrev}-r-#{$size}--mobile { @include media($mobile) { #{$prop}-right:  $length-x !important; } }
    .#{$abbrev}-b-#{$size}--mobile { @include media($mobile) { #{$prop}-bottom: $length-y !important; } }
    .#{$abbrev}-l-#{$size}--mobile { @include media($mobile) { #{$prop}-left:   $length-x !important; } }

    // Axes
    .#{$abbrev}-x-#{$size}--mobile {
      @include media($mobile) {
        #{$prop}-right:  $length-x !important;
        #{$prop}-left:   $length-x !important;
      }
    }
    .#{$abbrev}-y-#{$size}--mobile {
      @include media($mobile) {
        #{$prop}-top:    $length-y !important;
        #{$prop}-bottom: $length-y !important;
      }
    }
  }
}

.m-a-none--mobile { @include media($mobile) { margin: 0 !important; } }
.p-a-none--mobile { @include media($mobile) { padding: 0 !important; } }