CSS triangle generator use SCSS

_arrow.scss

/**
 * CSS triangle generator use SCSS
 */
@mixin arrow ($direction: "down", $color: #000, $width: 20px, $height: $width ) {
  	width: 0;
	height: 0;
	content: "";
	@if $direction == "right" {
		border-top: $height solid transparent;
		border-bottom: $height solid transparent;
		border-left: $width solid $color;
	
	}@elseif $direction == "left" {
		border-top: $height solid transparent;
		border-bottom: $height solid transparent;
		border-right: $width solid $color;
	
	}@elseif $direction == "top" {
		border-left: $width solid transparent;
		border-right: $width solid transparent;
		border-bottom: $height solid $color;
	
	}@elseif $direction == "bottom" {
		border-left: $width solid transparent;
		border-right: $width solid transparent;
		border-top: $height solid $color;

	}@elseif $direction == "topRight" {
		border-right: $width solid $color;
		border-bottom: $height solid transparent;

	}@elseif $direction == "topLeft" {
		border-right: $width solid transparent;
		border-top: $height solid $color;

	}@elseif $direction == "bottomRight" {
		border-bottom: $height solid $color;
		border-left: $width solid transparent;

	}@elseif $direction == "bottomLeft" {
		border-top: $height solid transparent;
		border-left: $width solid $color;
	}
}