CSS Triangle Mixin

mixins.scss

@mixin borderTrianlge($direction, $size, $color)
{
    $trans: $size solid transparent;
    $color: $size solid $color;
    width:  0;
    height: 0;
    @if $direction==up or $direction==down
    {
        border-left:   $trans;
        border-right:  $trans;
        border-top:    if($direction==up, none, $color);
        border-bottom: if($direction==up, $color, none);
    }
    @elseif $direction==left or $direction==right
    {
        border-top:    $trans;
        border-bottom: $trans;
        border-left:   if($direction==left, none, $color);
        border-right:  if($direction==left, $color, none);
    }
}