Triangles SASS mixin Wordpress SASS and Sublime Text tipps

Triangles SASS mixin

//Creates one triangle or two triangles (arrows) pointed to the opposite sides.
//Takes width, height, direction (top/left...)/orientation (horizontal, vertical), color, and from none up to two selectors arguments. Do not forget to put selector args in quotes if they contain dots, combinators etc.
//Cannot be used for creating triangles pointed at an angle (bottom-left etc...).
//To create one triangle using pseudoelement (:before): @include triangles(10px, 20px, top, red). The element currently in scope will be used.
//To create one triangle using real element: @include triangles(10px, 20px, top|bottom|left|right, red, li)
//To create two triangles using pseudoelements: @include triangles(10px, 20px, horizontal|vertical, red, li)
//To create two triangles using real elements: @include triangles(10px, 20px, horizontal|vertical, red, ".prev", ".next")
@mixin triangles($width, $height, $direction:horizontal, $color:black, $selector1:element, $selector2:"") { 
  $side1_this:left;
	$side2_this:right;
	$side3:top;
	$side4:bottom;
	$opposite-single:bottom;
	$pseudo-before:":before";
	$pseudo-after:":after";
	@if ($direction == vertical or $direction == horizontal) {
		@if ($direction == vertical) {
			$side1_this:top;
			$side2_this:bottom;
			$side3:left;
			$side4:right;
		}
		@if ($selector2 != "") {
			$pseudo-before:"";
			$pseudo-after:"";
		}
		@else {
			$selector2:$selector1;
		}
		#{$selector1}#{$pseudo-before}, #{$selector2}#{$pseudo-after} {display:block; width:0; height:0; border-#{$side3}:$height/2 solid transparent; border-#{$side4}:$height/2 solid transparent; content:''; } //Add transform: scale(1.01); for antialiasing in FF
				#{$selector1}#{$pseudo-before} {border-#{$side2_this}:$width solid $color;}
				#{$selector2}#{$pseudo-after} {border-#{$side1_this}:$width solid $color;}
	}
	@else if ($direction == top or $direction == bottom or $direction == left or $direction == right) {
		@if ($selector1 != element) {
			$pseudo-before:"";
			$pseudo-after:"";
		}
		@else {
			$selector1:"&";
		}
		@if ($direction == top) {
			$side3:left;
			$side4:right;
		}
		@else if ($direction == bottom) {
			$opposite-single:top;
			$side3:left;
			$side4:right;
		}
		@else if ($direction == left) {
			$opposite-single:right;
			$side3:top;
			$side4:bottom;
		}
		@else if ($direction == right) {
			$opposite-single:left;
			$side3:top;
			$side4:bottom;
		}
		#{$selector1}#{$pseudo-before} {display:block; width:0; height:0; border-#{$side3}:$height/2 solid transparent; border-#{$side4}:$height/2 solid transparent; border-#{$opposite-single}:$width solid $color; content:''; }
	}
}