Sass border utility

_utility.border.scss

/*
Borders
- - - - - - - - - - - - - - - - - - - - - - - - -

Helper classes for adding borders to elements

Class names follow this convention:

    .[type][direction][size]

* type: `border` for the border styling attribute
* direction: `v` for vertical, `h` for horizontal, `t` for top, `l` for left etc.
* size: `+` for large, `++` for huge (none for default)

Examples:

* `b++` will give you a huge (`++`) border (`border`)
* `bb0` will give you zero border (`m`) on the bottom (`b`)
* `bv+` will give you a large (`+`) vertical (`v`) borders (`m`)

*/

@mixin generate-directions($class-prefix, $class-postfix, $property, $size) {
  .#{$class-prefix}#{$class-postfix} { #{$property}: $size !important; }
  .#{$class-prefix}h#{$class-postfix} { #{$property}-left: $size !important; #{$property}-right: $size !important;}
  .#{$class-prefix}v#{$class-postfix} { #{$property}-top: $size !important; #{$property}-bottom: $size !important;}
  .#{$class-prefix}t#{$class-postfix} { #{$property}-top: $size !important;}
  .#{$class-prefix}b#{$class-postfix} { #{$property}-bottom: $size !important;}
  .#{$class-prefix}l#{$class-postfix} { #{$property}-left: $size !important;}
  .#{$class-prefix}r#{$class-postfix} { #{$property}-right: $size !important;}
}

// generates all sizes for the specified property
@mixin generate-border-classes($class-prefix, $size) {
  $size-large: $size * 2;
  $size-huge: $size * 4;
  @include generate-directions(#{$class-prefix}b, null, border, $size solid);
  @include generate-directions(#{$class-prefix}b, \+, border, $size-large solid);
  @include generate-directions(#{$class-prefix}b, \+\+, border, $size-huge solid);
  @include generate-directions(#{$class-prefix}b, 0, border, 0);
}

@include generate-border-classes(null, 1px);