Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="grid-block gutter">
  <div class="grid-block md-12 lg-4"></div>  
  <div class="grid-block md-12 lg-4"></div>  
  <div class="grid-block md-12 lg-4"></div>  
</div>

SassMeister-input.scss

// ----
// libsass (v3.3.6)
// ----

// Vars
// -----------------------------------------------------------------------------
// private
$_directions: "", "top", "right", "bottom", "left";

// public
$spacing-sizes: 0, 8px, 16px, 32px, 48px, 64px;
$border-sizes: 1px, 2px;
$colors: (
  info: blue,
  success: green,
  warning: yellow,
  danger: red
);


// Helper Functions
// -----------------------------------------------------------------------------
// Strips unit from value
// --------------------------------------------
@function strip-unit($value) {
  @return $value / ($value * 0 + 1);
}

// Escapse period for generated utility classes
// --------------------------------------------
@function escape-period($value) {
  $string: inspect(strip-unit($value));
  $index: str-index($string, ".");
  @if $index {
    @return "#{str-slice($string, 1, $index - 1)}\\.#{str-slice($string, $index + 1)}";
  }
  @else {
    @return $string;
  }
}


// Padding & Margins
//
// generates the following classes using the $spacing variable
// - dash denotes that the value will be applied to the element
// _ underscore denotes that the value will be applied to all first children
//
// p-value { padding: value }
// pt-value, py-value, py_value > * + * { padding-top: value }
// pr-value, px-value, px_value > * + * { padding-right: value }
// pb-value, py-value, py_value > * + * { padding-bottom: value }
// pl-value, px-value, px_value > * + * { padding-left: value }
//
// m-value { margin: value }
// mt-value, my-value, my_value > * + * { margin-top: value }
// mr-value, mx-value, mx_value > * + * { margin-right: value }
// mb-value, my-value, my_value > * + * { margin-bottom: value }
// ml-value, mx-value, mx_value > * + * { margin-left: value }
//
// -----------------------------------------------------------------------------
@mixin spacing-class($prop, $direction, $name, $value: $name, $includeAxis: true, $includeOwl: true) {
  $prop-short: str-slice($prop, 0, 1);
  $hyphen: if($direction == "", "", "-");
  $axis-selector: "";
  $owl-selector: "";
  
  // generate classes to space along x and y axes e.g. .mx-1, .mx_1
  @if $direction != "" {
    $axis: if($direction == "left" or $direction == "right", x, y);
    @if $includeAxis {
      $axis-selector: ", .#{$prop-short}#{$axis}-#{$name}";
    }
    @if $includeOwl and $value != 0 and $value != "auto" and $direction == "top" or $direction == "left" {
      $owl-selector: ", .#{$prop-short}#{$axis}_#{$name} > * + *";
    }
  }
  
  .#{$prop-short}#{str-slice($direction, 0, 1)}-#{$name}#{$axis-selector}#{$owl-selector} {
    #{$prop}#{$hyphen}#{$direction}: $value;
  }
}

@for $i from 1 through length($spacing-sizes) {
  @each $direction in $_directions {
    $value: nth($spacing-sizes, $i);
    $name: escape-period($value);
    @include spacing-class(margin, $direction, $name, $value);
    @include spacing-class(padding, $direction, $name, $value);
  }
}

@each $direction in $_directions {
  @include spacing-class(margin, $direction, auto);
}


// Borders
//
// generates the following classes using the $border-sizes variable
//
// b-value { border: value }
// bt-value { border-top: value }
// br-value { border-right: value }
// bb-value { border-bottom: value }
// bl-value { border-left: value }
// bc-value { border-color: value }
// -----------------------------------------------------------------------------
@each $value in $_directions {
  $hyphen: if($value == "", "", "-");
  $direction-name: #{str-slice($value, 0, 1)};
  $direction: #{$hyphen}#{$value};

  .b#{$direction-name} {
    border#{$direction}-width: nth($border-sizes, 1) solid;
  }
  
  @each $border-size in $border-sizes {
    .b#{$direction-name}-#{strip-unit($border-size)} {
      border#{$direction}-width: $border-size;
    }
  }
}

@each $key, $color in $colors {
  .bc-#{$key} {
    border-color: $color;
  }
}

SassMeister-output.css

.m-0 {
  margin: 0;
}

.p-0 {
  padding: 0;
}

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

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

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

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

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

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

.ml-0, .mx-0, .mx_0 > * + * {
  margin-left: 0;
}

.pl-0, .px-0, .px_0 > * + * {
  padding-left: 0;
}

.m-8 {
  margin: 8px;
}

.p-8 {
  padding: 8px;
}

.mt-8, .my-8, .my_8 > * + * {
  margin-top: 8px;
}

.pt-8, .py-8, .py_8 > * + * {
  padding-top: 8px;
}

.mr-8, .mx-8 {
  margin-right: 8px;
}

.pr-8, .px-8 {
  padding-right: 8px;
}

.mb-8, .my-8 {
  margin-bottom: 8px;
}

.pb-8, .py-8 {
  padding-bottom: 8px;
}

.ml-8, .mx-8, .mx_8 > * + * {
  margin-left: 8px;
}

.pl-8, .px-8, .px_8 > * + * {
  padding-left: 8px;
}

.m-16 {
  margin: 16px;
}

.p-16 {
  padding: 16px;
}

.mt-16, .my-16, .my_16 > * + * {
  margin-top: 16px;
}

.pt-16, .py-16, .py_16 > * + * {
  padding-top: 16px;
}

.mr-16, .mx-16 {
  margin-right: 16px;
}

.pr-16, .px-16 {
  padding-right: 16px;
}

.mb-16, .my-16 {
  margin-bottom: 16px;
}

.pb-16, .py-16 {
  padding-bottom: 16px;
}

.ml-16, .mx-16, .mx_16 > * + * {
  margin-left: 16px;
}

.pl-16, .px-16, .px_16 > * + * {
  padding-left: 16px;
}

.m-32 {
  margin: 32px;
}

.p-32 {
  padding: 32px;
}

.mt-32, .my-32, .my_32 > * + * {
  margin-top: 32px;
}

.pt-32, .py-32, .py_32 > * + * {
  padding-top: 32px;
}

.mr-32, .mx-32 {
  margin-right: 32px;
}

.pr-32, .px-32 {
  padding-right: 32px;
}

.mb-32, .my-32 {
  margin-bottom: 32px;
}

.pb-32, .py-32 {
  padding-bottom: 32px;
}

.ml-32, .mx-32, .mx_32 > * + * {
  margin-left: 32px;
}

.pl-32, .px-32, .px_32 > * + * {
  padding-left: 32px;
}

.m-48 {
  margin: 48px;
}

.p-48 {
  padding: 48px;
}

.mt-48, .my-48, .my_48 > * + * {
  margin-top: 48px;
}

.pt-48, .py-48, .py_48 > * + * {
  padding-top: 48px;
}

.mr-48, .mx-48 {
  margin-right: 48px;
}

.pr-48, .px-48 {
  padding-right: 48px;
}

.mb-48, .my-48 {
  margin-bottom: 48px;
}

.pb-48, .py-48 {
  padding-bottom: 48px;
}

.ml-48, .mx-48, .mx_48 > * + * {
  margin-left: 48px;
}

.pl-48, .px-48, .px_48 > * + * {
  padding-left: 48px;
}

.m-64 {
  margin: 64px;
}

.p-64 {
  padding: 64px;
}

.mt-64, .my-64, .my_64 > * + * {
  margin-top: 64px;
}

.pt-64, .py-64, .py_64 > * + * {
  padding-top: 64px;
}

.mr-64, .mx-64 {
  margin-right: 64px;
}

.pr-64, .px-64 {
  padding-right: 64px;
}

.mb-64, .my-64 {
  margin-bottom: 64px;
}

.pb-64, .py-64 {
  padding-bottom: 64px;
}

.ml-64, .mx-64, .mx_64 > * + * {
  margin-left: 64px;
}

.pl-64, .px-64, .px_64 > * + * {
  padding-left: 64px;
}

.m-auto {
  margin: auto;
}

.mt-auto, .my-auto {
  margin-top: auto;
}

.mr-auto, .mx-auto {
  margin-right: auto;
}

.mb-auto, .my-auto {
  margin-bottom: auto;
}

.ml-auto, .mx-auto, .mx_auto > * + * {
  margin-left: auto;
}

.b {
  border-width: 1px solid;
}

.b-1 {
  border-width: 1px;
}

.b-2 {
  border-width: 2px;
}

.bt {
  border-top-width: 1px solid;
}

.bt-1 {
  border-top-width: 1px;
}

.bt-2 {
  border-top-width: 2px;
}

.br {
  border-right-width: 1px solid;
}

.br-1 {
  border-right-width: 1px;
}

.br-2 {
  border-right-width: 2px;
}

.bb {
  border-bottom-width: 1px solid;
}

.bb-1 {
  border-bottom-width: 1px;
}

.bb-2 {
  border-bottom-width: 2px;
}

.bl {
  border-left-width: 1px solid;
}

.bl-1 {
  border-left-width: 1px;
}

.bl-2 {
  border-left-width: 2px;
}

.bc-info {
  border-color: blue;
}

.bc-success {
  border-color: green;
}

.bc-warning {
  border-color: yellow;
}

.bc-danger {
  border-color: red;
}

SassMeister-rendered.html

<div class="grid-block gutter">
  <div class="grid-block md-12 lg-4"></div>  
  <div class="grid-block md-12 lg-4"></div>  
  <div class="grid-block md-12 lg-4"></div>  
</div>