Striped Gradient Sass Mixin

Sass SCSS

@mixin bg-striped($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;
  }
}

HTML and CSS

<div class="container"></div>
.container {
  @include bg-striped(to top, #FFC107 #FF9800 #8BC34A #2196F3 #9C27B0);
  height: 250px;
  width: 90%;
  margin: 20px auto;
}
Show Comments