SCSS: Triangle Mixin

gistfile1

@mixin triangle($direction, $color, $size) {
 
  @if $direction == "left" {
    border-bottom: $size solid transparent;
    border-right: $size solid $color;
    border-top: $size solid transparent;
  }
  @else if $direction == "right" {
    border-bottom: $size solid transparent;
    border-left: $size solid $color;
    border-top: $size solid transparent;
  }
  @else if $direction == "up" {
    border-bottom: $size solid $color;
    border-left: $size solid transparent;
    border-right: $size solid transparent;
  }
  @else if $direction == "down" {
    border-right: $size solid transparent;
    border-left: $size solid transparent;
    border-top: $size solid $color;
  }
 
  height: 0;
  width: 0;
}