Skip to content

Instantly share code, notes, and snippets.

@HZ-labs
Created January 12, 2015 13:06
Show Gist options
  • Save HZ-labs/96044c87b31c1d53abf1 to your computer and use it in GitHub Desktop.
Save HZ-labs/96044c87b31c1d53abf1 to your computer and use it in GitHub Desktop.
/// 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