Medium - CSS for the Functional Programmer - Spacings

_spacings.scss

 /* 
  Loop through different CSS attributes to create a bunch
  of standard spacing classes, based on a single unit.
  
  Creates Classes such as:
    .padding-none
    .margin (all directions)
    .padding-left-none
    .margin-right-half
    .padding-top
    .margin-bottom-2x
    .padding-left-5x
    .padding-vertical-half
    .margin-horizontal-3x
  */
 
 
 /* Set $composable-unit to Foundation's $column-gutter */
$composable-unit: $column-gutter;

$sizing-attributes: 'padding', 'margin';
$directions: 'top', 'left', 'bottom', 'right';
$poles: 'vertical', 'horizontal';

 /* Loop through Attributes  */
@each $attr in $sizing-attributes {
  .#{$attr}-none {
    #{$attr}: 0;
  }
  .#{$attr} {
    #{$attr}: $composable-unit;
  }
  /* Generate Direction Based Spacing Classes */
  @each $direction in $directions {
    .#{$attr}-#{$direction}-none {
      #{$attr}-#{$direction}: 0;
    }
    .#{$attr}-#{$direction}-half {
      #{$attr}-#{$direction}: $composable-unit/2;
    }
    .#{$attr}-#{$direction} {
      #{$attr}-#{$direction}: $composable-unit;
    }
    @for $i from 2 through 5 {
      .#{$attr}-#{$direction}-#{$i}x {
        #{$attr}-#{$direction}: $composable-unit *$i;
      }
    }
    /* Generate Pole Based Spacing Classes */
    @each $pole in $poles {
      .#{$attr}-#{$pole}-none {
        @if $pole == 'vertical' {
          #{$attr}-top: 0;
          #{$attr}-bottom: 0;
        } @else {
          #{$attr}-left: 0;
          #{$attr}-right: 0;
        }
      }
      .#{$attr}-#{$pole}-half {
        @if $pole == 'vertical' {
          #{$attr}-top: $composable-unit /2;
          #{$attr}-bottom: $composable-unit /2;
        } @else {
          #{$attr}-left: $composable-unit /2;
          #{$attr}-right: $composable-unit /2;
        }
      }
      .#{$attr}-#{$pole} {
        @if $pole == 'vertical' {
          #{$attr}-top: $composable-unit;
          #{$attr}-bottom: $composable-unit;
        } @else {
          #{$attr}-left: $composable-unit;
          #{$attr}-right: $composable-unit;
        }
      }
      @for $i from 2 through 5 {
        .#{$attr}-#{$pole}-#{$i}x {
          @if $pole == 'vertical' {
            #{$attr}-top: $composable-unit *$i;
            #{$attr}-bottom: $composable-unit *$i;
          } @else {
            #{$attr}-left: $composable-unit *$i;
            #{$attr}-right: $composable-unit *$i;
          }
        }
      }
    }
  }
}