Generated by SassMeister.com.

SassMeister-input-HTML.html

<p>Demo by Adam Jenkins.</p>

SassMeister-input.scss

// ----
// Sass (v3.3.3)
// Compass (v1.0.0.alpha.18)
// ----

// Custom random function
// To allow a minimum value
// ------------------------------------------------------------
// @param $min: minimum value
// @param $max: maximum value
// ------------------------------------------------------------
// @return random number

@function rand($min, $max) {
  @return random($max - $min) + $min;
}

// 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);
  }
  
  $n: length($colors);
  $gradients: ();
  $variation: 10;
  $median: 100 / $n;
   
  @for $i from 1 to $n {
    $stop: $median * $i; 
    $random: rand($stop - $variation, $stop + $variation) * 1%;
    $gradients: append($gradients, nth($colors, $i) $random, comma);
    @if $i < length($colors) {
      $gradients: append($gradients, nth(nth($colors, $i + 1), 1) $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 {
  position: relative;
  height: 100%;
  background: #333;
  
  &:before,
  &:after {
    position: absolute;
    content: '';
    height: 1em;
    top: 0;
    left: 0;
    right: 0;
  }
  
  &:after {
    top: auto;
    bottom: 0;
  }
  
  &:before {
    $equal-stops: #1abc9c #2ecc71 #3498db #9b59b6 #34495e #f1c40f #e67e22 #e74c3c #ecf0f1 #95a5a6;
  
    // Equal stops
    // background: stripes($equal-stops, $direction);
  
    // Random stops
    background: stripes($equal-stops, 90deg, $random: true); 
  }
  
  &:after {
    $custom-stops: #1abc9c 10%, #2ecc71 12.5%, #3498db 28%, #9b59b6 35%, #34495e 60%, #f1c40f 69%, #e67e22 83%, #e74c3c 88%, #ecf0f1 96%, #95a5a6 100%;
    
    // Custom stops
    background: stripes($custom-stops, 90deg);
  }
}

body {
  padding-top: 20px;  
}

p {
  text-align: center;
  color: white;
  font-family: Arial, sans-serif;
}

a {
  color: white;
}

SassMeister-output.css

html {
  position: relative;
  height: 100%;
  background: #333;
}
html:before, html:after {
  position: absolute;
  content: '';
  height: 1em;
  top: 0;
  left: 0;
  right: 0;
}
html:after {
  top: auto;
  bottom: 0;
}
html:before {
  background: linear-gradient(90deg, #1abc9c 19.50137%, #2ecc71 19.50137%, #2ecc71 13.20473%, #3498db 13.20473%, #3498db 27.39328%, #9b59b6 27.39328%, #9b59b6 44.04707%, #34495e 44.04707%, #34495e 47.42599%, #f1c40f 47.42599%, #f1c40f 66.19189%, #e67e22 66.19189%, #e67e22 62.82329%, #e74c3c 62.82329%, #e74c3c 84.72725%, #ecf0f1 84.72725%, #ecf0f1 81.94618%, #95a5a6 81.94618%);
}
html:after {
  background: linear-gradient(90deg, #1abc9c 10%, #2ecc71 10%, #2ecc71 12.5%, #3498db 12.5%, #3498db 28%, #9b59b6 28%, #9b59b6 35%, #34495e 35%, #34495e 60%, #f1c40f 60%, #f1c40f 69%, #e67e22 69%, #e67e22 83%, #e74c3c 83%, #e74c3c 88%, #ecf0f1 88%, #ecf0f1 96%, #95a5a6 96%);
}

body {
  padding-top: 20px;
}

p {
  text-align: center;
  color: white;
  font-family: Arial, sans-serif;
}

a {
  color: white;
}

SassMeister-rendered.html

<p>Demo by Adam Jenkins.</p>