SASS Helper Classes

sass-helper-classes.scss

// Helper classes.
@each $property in (border, margin, padding) {
  @each $direction in ('', -left, -right, -top, -bottom) {
    .#{$property}#{$direction} {
      @if $property == border {
        #{$property}#{$direction}: 1px solid $gray-lighter;
      }
      @else {
        #{$property}#{$direction}: 1em;
      }
      @if $direction == -top {
        &:not(.no-first):first-of-type {
          #{$property}#{$direction}: 0;
        }
      }
      @else if $direction == -bottom {
        &:not(.no-last):last-of-type {
          #{$property}#{$direction}: 0;
        }
      }
    }
    .no-#{$property}#{$direction} {
      #{$property}#{$direction}: 0;
      &.important {
        #{$property}#{$direction}: 0 !important;
      }
    }
  }
}

This creates the following classes, all of which can add a prefix of no- which would instead set the property to 0.

Border

Class	Property
border	border: 1px solid $gray-lighter;
border-left	border-left: 1px solid $gray-lighter;
border-right	border-right: 1px solid $gray-lighter;
border-top	border-top: 1px solid $gray-lighter;
border-bottom	border-bottom: 1px solid $gray-lighter;

Margin

Class	Property
margin	margin: 1em;
margin-left	margin-left: 1em;
margin-right	margin-right: 1em;
margin-top	margin-top: 1em;
margin-bottom	margin-bottom: 1em;

Padding

Class	Property
padding	padding: 1em;
padding-left	padding-left: 1em;
padding-right	padding-right: 1em;
padding-top	padding-top: 1em;
padding-bottom	padding-bottom: 1em;