SCSS Mixing

triangle.scss

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