Gestreiftes Gradienten-Mixin

Eine beliebte Methode, um in CSS Streifen zu zeichnen, besteht darin, einen linearen Gradienten mit überlappenden Farbstopps zu definieren. Das funktioniert sehr gut, ist aber von Hand nicht sehr praktisch zu schreiben... Idee für eine Milliarde Dollar: Sass verwenden, um ihn automatisch aus einer Liste von Farben zu generieren!

/// Stripe builder
/// @author Kitty 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 {
        $stripes: append($stripes, nth($colors, $i - 1) $stripe, comma);
      }
      
      $stripes: append($stripes, nth($colors, $i) $stripe, comma);
    }
    
    background-image: linear-gradient($direction, $stripes);
  } @else if $length == 1 {
    background-color: $colors;
  }
}

Verwendung

body {
  @include stripes(to right, #8e44ad #2c3e50 #2980b9 #16a085 #27ae60);
}