Striped Gradient Mixin

A popular way to draw stripes in CSS it to define a linear-gradient with overlapping color-stops. It works very well but is not very convenient to write by hand... Billion dollar idea: using Sass to automatically generate it from a list of colors!

/// 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 {
        $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;
  }
}

Usage

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

See the Pen a990b82465115c2b556f1b86bf4692c7 by Hugo Giraudel (@HugoGiraudel) on CodePen.

Comments

  1. User Avatar
    LukyVj
    Permalink to comment#

    When Hugo use his magic wand with CSS it push it forward ! Well done Hugo, that’s so well written and useful, thank you for sharing.

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag