Skip to content

Instantly share code, notes, and snippets.

@cythux
Created August 21, 2013 10:30
Show Gist options
  • Save cythux/6292851 to your computer and use it in GitHub Desktop.
Save cythux/6292851 to your computer and use it in GitHub Desktop.
Triangles SASS mixin Wordpress SASS and Sublime Text tipps
//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:''; }
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment