scss 三角形SASS mixin

Posted 2021-05-18

/* ============================================================================
	
Triangles SASS mixin
v1.1
	
============================================================================ */

//Creates one triangle or two triangles (arrows) pointed to the opposite sides.
//Apply to a parent selector (for example, article, not .tags itself).
//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.
//Can be used to add triangles as pseudoelements to existing elements. Only works with two horizontal triangles for now.
//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:"", $positioned:no) { 
	$side1_this:left;
	$side2_this:right;
	$side3:top;
	$side4:bottom;
	$opposite-single:bottom;
	$pseudo-before:":before";
	$pseudo-after:":after";
	$positioned-top:0;
	$positioned-left:0;
	$positioned-right:0;
	@if ($positioned != no and $selector2 == "") {
		#{$selector1} {position:relative;}
		#{$selector1}#{$pseudo-before}, #{$selector1}#{$pseudo-after} {position:absolute;}
	}
	@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; content:''; width:0; height:0; border-#{$side3}:$height/2 solid transparent; border-#{$side4}:$height/2 solid transparent; -moz-transform: scale(1.01);} //Added -moz-transform for antialiasing in FF
		#{$selector1}#{$pseudo-before} {border-#{$side2_this}:$width solid $color;}
		#{$selector2}#{$pseudo-after} {border-#{$side1_this}:$width solid $color;}
		@if ($positioned != no and $direction == horizontal) {
			$positioned-left:-$width;
			$positioned-right:-$width;
			#{$selector1}#{$pseudo-before}, #{$selector1}#{$pseudo-after} {top:$positioned-top;}
			#{$selector1}#{$pseudo-before} {left:$positioned-left;}
			#{$selector1}#{$pseudo-after} {right:$positioned-right;}
		}
		@else if ($positioned != no and $direction == vertical) {
			$positioned-top:-$height;
			$positioned-bottom:-$height;
			#{$selector1}#{$pseudo-before}, #{$selector1}#{$pseudo-after} {left:$positioned-left;}
			#{$selector1}#{$pseudo-before} {top:$positioned-top;}
			#{$selector1}#{$pseudo-after} {bottom:$positioned-bottom;}
		}
	}
	@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; content:''; width:0; height:0; border-#{$side3}:$height/2 solid transparent; border-#{$side4}:$height/2 solid transparent; border-#{$opposite-single}:$width solid $color; }
	}
}