SASS: Triangle Mixin

gistfile1.scss

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

.triangle {
  @include triangle(200px, up, #888);
}

for real? this is the worst mixin ever, sorry. it's not DRY at all.