Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----

// Root Font Size Applies To HTML Element
$root-font-size   : 14px;

// Body Font Size Is Refering to That Set On The HTML Element
$body-font-size   : 1rem;

// Body Line Height
$body-line-height : 1.6;

// Choose Between *Baseline Height Based Spacers ( Default - true ) 
// or *User Defined PX/EM/REM ( false ).
$baseline-height-based-spacers : false;

// To Change The Baseline Based Spaces You Only Need Change 
// The Integer On -md and -lg Which Is What The Baseline Will Be
// Multiplied By.
$baseline-md-multiple : 1.5;
$baseline-lg-multiple : 3;

// If $baseline-height-based-spacers Is Set To *false* Below
// Is Were You Declare Your User Defined Spacer Sizes
$user-defined-spacer-0   : 0;
$user-defined-spacer-std : 1em;
$user-defined-spacer-md  : 2em;
$user-defined-spacer-lg  : 3em;

// Lists
//
// These Lists Are Quite Good Really, Providing You Can Stick To
// A Rule Or Two You Can Get Quite Creative.
//
// List One ** Directions **
// a = all    ( Shorthand Property ) eg. .selector { margin: value; } 
// t = top    ( Specific Property  ) eg. .selector { margin-top: value; } 
// r = right  ( Specific Property  ) eg. .selector { margin-right: value; }
// b = bottom ( Specific Property  ) eg. .selector { margin-bottom: value; }
// l = left   ( Specific Property  ) eg. .selector { margin-left: value; }
//
// By Changing The List Item Name You ONLY Change Its Name Stamp In The 
// Generated Class, They Will ALWAYS Fall In The Above Order To Reference 
// The Correct Property! 
$directions       : a-, t-, r-, b-, l-, x-, y-;

// List Two ** Sizes **
//
// The Sizes List Reffers To Your Logic Of Spcaing I Suppose, Like Above
// There Is A Rule To Stick To. 
//
// No More Than Four!
// The First Always Reffers To 0
//
// Truthfully There Is Probably Two Options Depending On Your Taste...
// $sizes   : 0, std, md, lg; or...
// $sizes   : 0, 1em, 2em, 3em; ( Based On Your Chosen Sizes Of Course )
//
// These List Items Have NO Affect On Any Spacing If You Give Them A Value
// Like 1em, They Are Only Used To Make The Class Name.
$sizes            : none, std, md, lg;

// Margin / Padding Naming
//
// Lastly You Can Choose How You Want The Class Names That Refference
// Margin / Padding To Be Pumped Out By Changing The String In The 
// Corresponding Vairiable.
$margin-class-slug  : 'mar-';
$padding-class-slug : 'pad-';

//-----------------------------------------------------------------
// ** // ** GO NO FURTHER ( unless you want to ) ** // ** //
//-----------------------------------------------------------------


//-----------------------------------------------------------------
// THE IF ELSE BASELINE TRUE
//-----------------------------------------------------------------
@if $baseline-height-based-spacers == true {
  
  $spacer-0   : 0 !global;
  $spacer-std : $body-font-size * $body-line-height !global;
  $spacer-md  : $spacer-std * $baseline-md-multiple !global;
  $spacer-lg  : $spacer-std * $baseline-lg-multiple !global;
  
} @else {
  
  $spacer-0   : $user-defined-spacer-0 !global;
  $spacer-std : $user-defined-spacer-std !global;
  $spacer-md  : $user-defined-spacer-md !global;
  $spacer-lg  : $user-defined-spacer-lg !global;
  
}
//-----------------------------------------------------------------
// THE FOR IF ELSE FOR EACH IF LOOP 
//-----------------------------------------------------------------
@for $prop from 1 through 2 {
  
  $pad-mar : null;
  $property : null;
  
  @if $prop == 1 {
      $pad-mar  : $margin-class-slug;
      $property : 'margin';
  }  @else {
      $pad-mar  : $padding-class-slug;
      $property : 'padding';
  }
  
  @for $i from 1 through 5 {
    
    $d : null;
  
    @if $i == 1 { $i : nth($directions, 1); $d : ''; }
    @if $i == 2 { $i : nth($directions, 2); $d : '-top'; }
    @if $i == 3 { $i : nth($directions, 3); $d : '-right'; }
    @if $i == 4 { $i : nth($directions, 4); $d : '-bottom'; }
    @if $i == 5 { $i : nth($directions, 5); $d : '-left'; }
  
    @each $s in $sizes {
      
      .#{$pad-mar}#{$i}#{$s} {
      
        $val : null;
      
        @if $s == nth($sizes, 1) { $val : $spacer-0; }
        @if $s == nth($sizes, 2) { $val : $spacer-std; }
        @if $s == nth($sizes, 3) { $val : $spacer-md; }
        @if $s == nth($sizes, 4) { $val : $spacer-lg; }
      
        #{$property}#{$d}: #{$val};
      }
      
    }
    
  }
  @for $i from 1 through 2 {
    
    $d  : null;
    $dd : null;
  
    @if $i == 1 { $i : nth($directions, 6); $d : '-right'; $dd : '-left' }
    @if $i == 2 { $i : nth($directions, 7); $d : '-top'; $dd : '-bottom'}
  
    @each $s in $sizes {
      
      .#{$pad-mar}#{$i}#{$s} {
      
        $val : null;
      
        @if $s == nth($sizes, 1) { $val : $spacer-0; }
        @if $s == nth($sizes, 2) { $val : $spacer-std; }
        @if $s == nth($sizes, 3) { $val : $spacer-md; }
        @if $s == nth($sizes, 4) { $val : $spacer-lg; }
      
        #{$property}#{$d}: #{$val};
        #{$property}#{$dd}: #{$val};
      }
      
    }
    
  }
  
}

SassMeister-output.css

.mar-a-none { margin: 0; }

.mar-a-std { margin: 1em; }

.mar-a-md { margin: 2em; }

.mar-a-lg { margin: 3em; }

.mar-t-none { margin-top: 0; }

.mar-t-std { margin-top: 1em; }

.mar-t-md { margin-top: 2em; }

.mar-t-lg { margin-top: 3em; }

.mar-r-none { margin-right: 0; }

.mar-r-std { margin-right: 1em; }

.mar-r-md { margin-right: 2em; }

.mar-r-lg { margin-right: 3em; }

.mar-b-none { margin-bottom: 0; }

.mar-b-std { margin-bottom: 1em; }

.mar-b-md { margin-bottom: 2em; }

.mar-b-lg { margin-bottom: 3em; }

.mar-l-none { margin-left: 0; }

.mar-l-std { margin-left: 1em; }

.mar-l-md { margin-left: 2em; }

.mar-l-lg { margin-left: 3em; }

.mar-x-none { margin-right: 0; margin-left: 0; }

.mar-x-std { margin-right: 1em; margin-left: 1em; }

.mar-x-md { margin-right: 2em; margin-left: 2em; }

.mar-x-lg { margin-right: 3em; margin-left: 3em; }

.mar-y-none { margin-top: 0; margin-bottom: 0; }

.mar-y-std { margin-top: 1em; margin-bottom: 1em; }

.mar-y-md { margin-top: 2em; margin-bottom: 2em; }

.mar-y-lg { margin-top: 3em; margin-bottom: 3em; }

.pad-a-none { padding: 0; }

.pad-a-std { padding: 1em; }

.pad-a-md { padding: 2em; }

.pad-a-lg { padding: 3em; }

.pad-t-none { padding-top: 0; }

.pad-t-std { padding-top: 1em; }

.pad-t-md { padding-top: 2em; }

.pad-t-lg { padding-top: 3em; }

.pad-r-none { padding-right: 0; }

.pad-r-std { padding-right: 1em; }

.pad-r-md { padding-right: 2em; }

.pad-r-lg { padding-right: 3em; }

.pad-b-none { padding-bottom: 0; }

.pad-b-std { padding-bottom: 1em; }

.pad-b-md { padding-bottom: 2em; }

.pad-b-lg { padding-bottom: 3em; }

.pad-l-none { padding-left: 0; }

.pad-l-std { padding-left: 1em; }

.pad-l-md { padding-left: 2em; }

.pad-l-lg { padding-left: 3em; }

.pad-x-none { padding-right: 0; padding-left: 0; }

.pad-x-std { padding-right: 1em; padding-left: 1em; }

.pad-x-md { padding-right: 2em; padding-left: 2em; }

.pad-x-lg { padding-right: 3em; padding-left: 3em; }

.pad-y-none { padding-top: 0; padding-bottom: 0; }

.pad-y-std { padding-top: 1em; padding-bottom: 1em; }

.pad-y-md { padding-top: 2em; padding-bottom: 2em; }

.pad-y-lg { padding-top: 3em; padding-bottom: 3em; }