Created
January 12, 2015 13:06
-
-
Save HZ-labs/96044c87b31c1d53abf1 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/// Stripe builder | |
/// @author Hugo Giraudel | |
/// @param {Direction} $direction - Gradient direction | |
/// @param {List} $colors - List of colors | |
/// @output `background-image` if several colors, `background-color` if only one | |
@mixin stripes($direction, $colors) { | |
$length: length($colors); | |
@if $length > 1 { | |
$stripes: (); | |
@for $i from 1 through $length { | |
$stripe: (100% / $length) * ($i - 1); | |
@if $i > 1 { | |
$previous-color: nth($colors, $i - 1); | |
$stripes: append($stripes, $previous-color $stripe, comma); | |
} | |
$stripes: append($stripes, nth($colors, $i) $stripe, comma); | |
} | |
background-image: linear-gradient($direction, $stripes); | |
} @else if $length == 1 { | |
background-color: $colors; | |
} | |
} | |
html, body { | |
height: 100%; | |
} | |
body { | |
@include stripes(to right, #8e44ad #2c3e50 #2980b9 #16a085 #27ae60); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment