Push classes generator

push.scss

// ----
// Sass (v3.4.1)
// Compass (v1.0.1)
// ----

/**
 * PUSH CLASSES GENERATOR
 **/
 
$directions: top, left, right, bottom, sides, ends; // define sides that will have margin
$margin-sizes: s, m, l; // define different margin sizes
$base-spacing: 1rem; // set base margin

@each $current-size in $margin-sizes { 
  // variables must be initialized here, because sass
  // has block-level variables, and vars inside @if blocks
  // aren't accessible outside them
  $margin-size: 0;
  $class-suffix: '';
  
  // set corresponding margin and class-suffix for
  // currently active size
  @if ($current-size == s) {
    $margin-size: $base-spacing / 2;
    $class-suffix: '--small';
  }
  @else if ($current-size == l) {
    $margin-size: $base-spacing * 2;
    $class-suffix: '--large';
  }
  @else {
    $margin-size: $base-spacing;
  }
  // Output CSS classes
  @each $direction in $directions {
    .push-#{$direction}#{$class-suffix} {
      @if ($direction == ends) {
        margin: $margin-size 0;
      }
      @if ($direction == sides) {
        margin: 0 $margin-size;
      }
      @else {
        margin-#{$direction}: $margin-size;
      }
    }
  }
}