Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----


// test
$eneable-spacing-helpers: true;


// Default spacing value
$base-spacing:    5px !default;

// Flag for generating helper spacing classes
$eneable-spacing-helpers: false !default;


// Maps for values and properties

$spacing-map: (

  "0":    0,
  "xs":   $base-spacing,
  "s":    $base-spacing * 2,
  "m":    $base-spacing * 3,
  "l":    $base-spacing * 4,
  "xl":   $base-spacing * 6

) !default;

$helpers: (

  "m":    "margin",
  "mt":   "margin-top",
  "mr":   "margin-right",
  "mb":   "margin-bottom",
  "ml":   "margin-left",
  "mh":   "margin-right" "margin-left",
  "mv":   "margin-top" "margin-bottom",

  "p":    "padding",
  "pt":   "padding-top",
  "pr":   "padding-right",
  "pb":   "padding-bottom",
  "pl":   "padding-left",
  "ph":   "padding-right" "padding-left",
  "pv":   "padding-top" "padding-bottom"

) !default;


@if ($eneable-spacing-helpers == true) {

  // Loop over the helpers in $helpers
  @each $alias, $property in $helpers {

    // Loop over spacing values in $spacing-map
    @each $key, $value in $spacing-map {

      // Create a new class
      .#{$alias}-#{$key} {

        // If helper contains several properties, loop over them 
        @if length($property) > 1 {
          @each $prop in $property {
            #{$prop}: $value;
          }
        }

        // If helper is a single property, output it
        @else {
          #{$property}: $value;
        }
      }

    }
  }

}

SassMeister-output.css

.m-0 { margin: 0; }

.m-xs { margin: 5px; }

.m-s { margin: 10px; }

.m-m { margin: 15px; }

.m-l { margin: 20px; }

.m-xl { margin: 30px; }

.mt-0 { margin-top: 0; }

.mt-xs { margin-top: 5px; }

.mt-s { margin-top: 10px; }

.mt-m { margin-top: 15px; }

.mt-l { margin-top: 20px; }

.mt-xl { margin-top: 30px; }

.mr-0 { margin-right: 0; }

.mr-xs { margin-right: 5px; }

.mr-s { margin-right: 10px; }

.mr-m { margin-right: 15px; }

.mr-l { margin-right: 20px; }

.mr-xl { margin-right: 30px; }

.mb-0 { margin-bottom: 0; }

.mb-xs { margin-bottom: 5px; }

.mb-s { margin-bottom: 10px; }

.mb-m { margin-bottom: 15px; }

.mb-l { margin-bottom: 20px; }

.mb-xl { margin-bottom: 30px; }

.ml-0 { margin-left: 0; }

.ml-xs { margin-left: 5px; }

.ml-s { margin-left: 10px; }

.ml-m { margin-left: 15px; }

.ml-l { margin-left: 20px; }

.ml-xl { margin-left: 30px; }

.mh-0 { margin-right: 0; margin-left: 0; }

.mh-xs { margin-right: 5px; margin-left: 5px; }

.mh-s { margin-right: 10px; margin-left: 10px; }

.mh-m { margin-right: 15px; margin-left: 15px; }

.mh-l { margin-right: 20px; margin-left: 20px; }

.mh-xl { margin-right: 30px; margin-left: 30px; }

.mv-0 { margin-top: 0; margin-bottom: 0; }

.mv-xs { margin-top: 5px; margin-bottom: 5px; }

.mv-s { margin-top: 10px; margin-bottom: 10px; }

.mv-m { margin-top: 15px; margin-bottom: 15px; }

.mv-l { margin-top: 20px; margin-bottom: 20px; }

.mv-xl { margin-top: 30px; margin-bottom: 30px; }

.p-0 { padding: 0; }

.p-xs { padding: 5px; }

.p-s { padding: 10px; }

.p-m { padding: 15px; }

.p-l { padding: 20px; }

.p-xl { padding: 30px; }

.pt-0 { padding-top: 0; }

.pt-xs { padding-top: 5px; }

.pt-s { padding-top: 10px; }

.pt-m { padding-top: 15px; }

.pt-l { padding-top: 20px; }

.pt-xl { padding-top: 30px; }

.pr-0 { padding-right: 0; }

.pr-xs { padding-right: 5px; }

.pr-s { padding-right: 10px; }

.pr-m { padding-right: 15px; }

.pr-l { padding-right: 20px; }

.pr-xl { padding-right: 30px; }

.pb-0 { padding-bottom: 0; }

.pb-xs { padding-bottom: 5px; }

.pb-s { padding-bottom: 10px; }

.pb-m { padding-bottom: 15px; }

.pb-l { padding-bottom: 20px; }

.pb-xl { padding-bottom: 30px; }

.pl-0 { padding-left: 0; }

.pl-xs { padding-left: 5px; }

.pl-s { padding-left: 10px; }

.pl-m { padding-left: 15px; }

.pl-l { padding-left: 20px; }

.pl-xl { padding-left: 30px; }

.ph-0 { padding-right: 0; padding-left: 0; }

.ph-xs { padding-right: 5px; padding-left: 5px; }

.ph-s { padding-right: 10px; padding-left: 10px; }

.ph-m { padding-right: 15px; padding-left: 15px; }

.ph-l { padding-right: 20px; padding-left: 20px; }

.ph-xl { padding-right: 30px; padding-left: 30px; }

.pv-0 { padding-top: 0; padding-bottom: 0; }

.pv-xs { padding-top: 5px; padding-bottom: 5px; }

.pv-s { padding-top: 10px; padding-bottom: 10px; }

.pv-m { padding-top: 15px; padding-bottom: 15px; }

.pv-l { padding-top: 20px; padding-bottom: 20px; }

.pv-xl { padding-top: 30px; padding-bottom: 30px; }