SCSS Triangle Generator

_triangleGenerator.scss

//----------------------------------------------------------------------
// Convert a number to specified unit
// @function unit
// @param {number} $num number to be converted to unit
// @param {string} $units unit number will be converted to
// @returns {string}
//----------------------------------------------------------------------
@function unit($num, $units) {
    @return #{$num}#{$units};
}
//----------------------------------------------------------------------
// Render triangle with given color
// @mixin triangle
// @param {string} $orientation direction triangle point will face
// @param {number} $width width of triangle base
// @param {number} $height height from base to point
// @param {rgb[a]} $color color of the triangle
// @returns {border properties}
//----------------------------------------------------------------------
@mixin triangle($orientation, $width, $height, $color) {
    /* begin drawing triangle */
    @if $orientation == top {
        border-width: 0 unit($width / 2, px) unit($height / 1, px) unit($width / 2, px);
        border-color: transparent transparent $color transparent;
    } @else if $orientation == left {
        border-width: unit($height/2, px) unit($width, px) unit($height/2, px) 0;
        border-color: transparent $color transparent transparent;
    } @else if $orientation == bottom {
        border-width: unit($height, px) unit($width/2, px) 0 unit($width/2, px);
        border-color: $color transparent transparent transparent;
    } @else if $orientation == right {
        border-width: unit($height/2, px) 0 unit($height/2, px) unit($width, px);
        border-color: transparent transparent transparent $color;
    } @else {
        @warn("triangle mixin expected an orientation of top/right/bottom/left");
    }

    width: 0;
    height: 0;
    border-style: solid;
    /* finish drawing triangle */
}