repeating-linear-gradient not working as expected when using Sass?

Is your linear gradient background just not working when you use Sass?

I ran into this problem recently on a client site. Instead of creating the striped pattern I was going for, Chrome rendered a plain color. Ugh!

Fortunately for you, via some trial and error I figured out an easy fix! Read on to find out what I did to get that striped background my client’s mockup called for.

How to fix a broken repeating-linear-gradient when using Sass

So, what gives? Why did I get a plain colored background when I used Sass, while CodePen had no issue rendering the striped background pattern when I used plain CSS?

The answer: multiple stops for each color, one of which was 0px.

The particular Sass compiler I was using (gulp-sass) stripped out the ‘0px’ part of my first color declaration, making my “stripes” overlap and display one plain color instead. When I separated each color stop into its own entity, they displayed just fine, even though gulp-sass still stripped the 0px declaration.

Here’s the original (broken) Sass I was using:

background: $light-blue repeating-linear-gradient( 90deg, darken( $light-blue, 3% ) 0px 40px, $light-blue 40px 80px );

And here’s the Sass that actually worked:

background: $light-blue repeating-linear-gradient( 90deg, darken( $light-blue, 3% ) 0px, darken( $light-blue, 3% ) 40px, $light-blue 40px, $light-blue 80px );

That’s all there is to it! If you’re having a problem with your repeating-linear-gradient backgrounds not rendering correctly, try separating out each stop explicitly like I did in that second code blurb above.

Did this post stop you from pulling your hair out for hours? Let me know in the comments below! ?