extensible-spacing-with-modifiers.scss

// Sexy mixin for margin/padding
@mixin postfix-spacer($side, $size) {
  %#{ $pre }-#{$type}-#{$side} {
    #{$type}-#{$side}: $size;
  }
}

@mixin spacing-with-modifiers($spacing: 10px, $type: "margin", $pre: "mar") {

  %#{$pre}-#{$type} {
    #{$type}: $spacing;
  }

  @include postfix-spacer("top", $spacing);
  @include postfix-spacer("bottom", $spacing);
  @include postfix-spacer("left", $spacing);
  @include postfix-spacer("right", $spacing);

  %#{$pre}-#{$type}-sides {
    #{$type}: 0px $spacing;
  }
  %#{$pre}-#{$type}-vertical {
    #{$type}: $spacing 0px;
  }
}

// Extensible margins and paddings!

@include spacing-with-modifiers(10px, "margin", "std");
@include spacing-with-modifiers(10px, "padding", "std");

// Makes this: 
// %std-margin {
//   margin: 10px;
// }
// %std-margin-left {
//   margin-left: 10px;
// }
// %std-margin-right {
//   margin-right: 10px;
// }
// %std-margin-top {
//   margin-top: 10px;
// }
// %std-margin-right {
//   margin-bottom: 10px;
// }
// %std-margin-sides {
//   margin: 0px 10px;
// }
// %std-margin-vertical {
//   margin: 10px 0px;
// }