Skip to content

Instantly share code, notes, and snippets.

@FWeinb
Forked from KittyGiraudel/SassMeister-input.scss
Created February 4, 2014 16:55
Show Gist options
  • Save FWeinb/8807701 to your computer and use it in GitHub Desktop.
Save FWeinb/8807701 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.3.0.rc.2)
// Compass (v1.0.0.alpha.17)
// ----
@import "compass";
// Private function for custom stops
// ------------------------------------------------------------
// @param $colors: list of color + associated stop
// ex: (red 10%, blue 50%, green 65%)
// ------------------------------------------------------------
// @return list to be used as a gradient
@function _stripes-custom-stops($colors) {
$gradients: ();
@for $i from 1 to length($colors) {
@if length(nth($colors, $i)) > 1 {
$color: nth(nth($colors, $i), 1);
$stop: nth(nth($colors, $i), 2);
$gradients: append($gradients, $color $stop, comma);
@if $i < length($colors) {
$gradients: append($gradients, nth(nth($colors, $i + 1), 1) $stop);
}
}
@else {
@warn '`#{nth($colors, $i)}` skipped because it is only one item long while it should be 2: (color, color-stop).';
}
}
@return $gradients;
}
// Private function for random stops
// ------------------------------------------------------------
// @param $colors: list of color
// ex: (red, blue, green)
// ------------------------------------------------------------
// @return two dimensional list
@function _stripes-random-stops($colors) {
@if length(nth($colors, 1)) > 1 {
@return _stripes-custom-stops($colors);
}
$last-random: 0;
$gradients: ();
@for $i from 1 to length($colors) {
$random: random($last-random, 100) * 1%;
$gradients: append($gradients, nth($colors, $i) $random, comma);
@if $i < length($colors) {
$gradients: append($gradients, nth(nth($colors, $i + 1), 1) $random);
}
$last-random: $random;
}
@return $gradients;
}
// Private function for equal stops
// ------------------------------------------------------------
// @param $colors: list of color
// ex: (red, blue, green)
// ------------------------------------------------------------
// @return two dimensional list
@function _stripes-equal-stops($colors) {
$gradients: ();
$stops: 100% / length($colors);
// Loop through colors
@for $i from 1 to length($colors) {
$gradients: append($gradients, nth($colors, $i) $i * $stops, comma);
@if $i < length($colors) {
$gradients: append($gradients, nth($colors, $i + 1) $i * $stops);
}
}
// Return gradient
@return $gradients;
}
// Function turning a list of colors (and if specified stops)
// into a stripes gradient
// ------------------------------------------------------------
// @param $colors: list of color or color + color stop
// ex: (red blue green)
// ex: (red 10%, blue 50%, green 65%)
// @param $direction: gradient direction in keyword or degrees
// @param $random: should color-stops be randomly generated
// ------------------------------------------------------------
// @return gradient
@function stripes($colors, $direction: 90deg, $random: false) {
// If lonely color
@if length($colors) == 1 { @return $colors; }
// Else
$type: if($random, 'random', if(length(nth($colors, 1)) > 1, 'custom', 'equal'));
@return linear-gradient($direction, call('_stripes-#{$type}-stops', $colors));
}
html {
height: 100%;
$equal-stops : brown red orange yellow green teal blue;
$custom-stops : brown 10%, red 34%, orange 46%, yellow 50%, green 57%, teal 75%, blue 86%;
$direction : 90deg;
// Equal stops
background: stripes($equal-stops, $direction);
// Random stops
// background: stripes($equal-stops, $direction, $random: true);
// Custom stops
// background: stripes($custom-stops, $direction);
}
html {
height: 100%;
background: linear-gradient(90deg, #a52a2a 14.28571%, #ff0000 14.28571%, #ff0000 28.57143%, #ffa500 28.57143%, #ffa500 42.85714%, #ffff00 42.85714%, #ffff00 57.14286%, #008000 57.14286%, #008000 71.42857%, #008080 71.42857%, #008080 85.71429%, #0000ff 85.71429%);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment