A Sass mixin to simplify the creation of border shorthands for specific elements.

border-shorthand-mixin.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

// Sass - Border Shorthand Mixin
// A mixin to simplify writing multiple border shorthands for specific elements.
// To-do:
// - Improve @if-else chaining
// - Nested functions?
// 
// Directional Mappings:
// all, top, bottom, left, right,
// horizontal, vertical, top-left, top-right, bottom-left, bottom-right,
// no-top, no-bottom, no-left, no-right

@mixin border($direction, $size: 1px, $style: solid, $color: #222) {
  @if ($direction == 'all') 
      or ($direction == 'no-top') 
      or ($direction == 'no-bottom') 
      or ($direction == 'no-left') 
      or ($direction == 'no-right') {
    border: $size $style $color;
    
    @if $direction == 'no-top' {
      border-top: 0;
    }
    @if $direction == 'no-bottom' {
      border-bottom: 0;
    }
    @if $direction == 'no-left' {
      border-left: 0;
    }
    @if $direction == 'no-right' {
      border-right: 0;
    }
  } @else if ($direction == 'top') 
      or ($direction == 'vertical') 
      or ($direction == 'top-left') 
      or ($direction == 'top-right') {
    border-top: $size $style $color;
    
    @if $direction == 'vertical' {
      border-bottom: $size $style $color;
    }
    @if $direction == 'top-left' {
      border-left: $size $style $color;
    }
    @if $direction == 'top-right' {
      border-right: $size $style $color;
    }
  } @else if ($direction == 'bottom') 
      or ($direction == 'bottom-left') 
      or ($direction == 'bottom-right') {
    border-bottom: $size $style $color;
    
    @if $direction == 'bottom-left' {
      border-left: $size $style $color;
    }
    @if $direction == 'bottom-right' {
      border-right: $size $style $color;
    }
  } @else if ($direction == 'left') 
      or ($direction == 'horizontal') {
    border-left: $size $style $color;
    
    @if $direction == 'horizontal' {
      border-right: $size $style $color;
    }
  } @else if ($direction == 'right') {
    border-right: $size $style $color;
  } @else {
    @warn 'This property does not exist in this property map.';
  }
}

.box {
  @include border(horizontal, 4px, solid, purple);
  @include border(bottom, 6px, double, orange);
  background-color: #ccc;
  width: 960px;
  height: 120px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
}

output.css

.box {
  border-left: 4px solid purple;
  border-right: 4px solid purple;
  border-bottom: 6px double orange;
  background-color: #ccc;
  width: 960px;
  height: 120px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
}