Margin helper

gistfile1.scss

//-- Helpers ----------------------------------------------------------
@function push-get-size($key) {
  $sizes: map-get($push-config, sizes);
  @return map-get($sizes, $key);
}

//-- Config -----------------------------------------------------------
$push-spacing:    util-rhythm(1);
$push-key-half:   "-_5x";  // 0.5 | half
$push-key-double: "-2x";
$push-key-triple: "-3x";

$push-config: (
  modifiers: top bottom left right,
  variations: null $push-key-half $push-key-double $push-key-triple,
  sizes: (
    null:             $push-spacing,
    $push-key-half:   $push-spacing*0.5,
    $push-key-double: $push-spacing*2,
    $push-key-triple: $push-spacing*3
  )
);

//-- Main -------------------------------------------------------------
@each $variation in map-get($push-config, variations) {
  $size: push-get-size($variation);
  $size-in-px: rem-to-px($size);
  $modifiers: map-get($push-config, modifiers);

  %push#{$variation},
  .push#{$variation} {
    margin: $size-in-px!important;
    margin: $size!important;
  }

  %push#{$variation}--sides,
  .push#{$variation}--sides {
    margin-left:  $size-in-px!important;
    margin-left:  $size!important;
    margin-right: $size-in-px!important;
    margin-right: $size!important;
  }

  %push#{$variation}--ends,
  .push#{$variation}--ends {
    margin-top:    $size-in-px!important;
    margin-top:    $size!important;
    margin-bottom: $size-in-px!important;
    margin-bottom: $size!important;
  }

  @each $modifier in $modifiers {
    %push#{$variation}--#{$modifier},
    .push#{$variation}--#{$modifier} {
      margin-#{$modifier}: $size-in-px!important;
      margin-#{$modifier}: $size!important;
    }
  }
}

// Remove margins -----------------------------------------------------
.flush          { margin:       0!important; }
.flush--top     { margin-top:   0!important; }
.flush--right   { margin-right: 0!important; }
.flush--bottom  { margin-bottom:0!important; }
.flush--left    { margin-left:  0!important; }
.flush--ends    { margin-top:   0!important; margin-bottom:0!important; }
.flush--sides   { margin-right: 0!important; margin-left:  0!important; }