Automated Margins Mixin

auto_mixins.scss

// Define your different margin sizes
// Along with the directions ( if needed )
$m-sizes: 16, 32, 46;
$m-dir: 'left', 'right', 'top', 'bottom';

@mixin all-margin($value, $direction){
  @if $value < 17 {
    .margin-s-#{$direction}{
      margin-#{$direction}: $value#{px};
    }
  }
  @if $value > 17 and $value < 33{
    .margin-m-#{$direction}{
      margin-#{$direction}: $value#{px};
    }
  }
  @if $value > 33{
    .margin-l-#{$direction}{
      margin-#{$direction}: $value#{px};
    }
  }
}


@mixin margin-classes{
  @each $size in $m-sizes{
    @each $dir in $m-dir{
      @include all-margin($size, $dir)
    }
  }
}

@include margin-classes();

// Will generate 
/*

.margin-s-left {
  margin-left: 16px;
}

.margin-s-right {
  margin-right: 16px;
}

.margin-s-top {
  margin-top: 16px;
}

.margin-s-bottom {
  margin-bottom: 16px;
}

.margin-m-left {
  margin-left: 32px;
}

.margin-m-right {
  margin-right: 32px;
}

.margin-m-top {
  margin-top: 32px;
}

.margin-m-bottom {
  margin-bottom: 32px;
}

.margin-l-left {
  margin-left: 46px;
}

.margin-l-right {
  margin-right: 46px;
}

.margin-l-top {
  margin-top: 46px;
}

.margin-l-bottom {
  margin-bottom: 46px;
}

*/