Skip to main
Article

Sass Striped Backgrounds

Jina asked twitter for Sass advice the other day. She was working on a bit of code to create a rainbow-striped background gradient using any set of arbitrary colors. This is my solution, in the form of a Sass function. This requires Sass 3.2 in order to run.

Start by setting a variable to the colors you want:

$rainbow: red orange yellow green blue indigo violet;

You could set individual variables for each color as well. You would still pass them all as a single argument, or join them into a single variable before passing, as you see fit.

Here’s the function:

// Returns a striped gradient for use anywhere gradients are accepted.
// - $position: the starting position or angle of the gradient.
// - $colors: a list of all the colors to be used.
@function stripes($position, $colors) {
  $colors: if(type-of($colors) != 'list', compact($colors), $colors);
  $gradient: compact();
  $width: 100% / length($colors);

  @for $i from 1 through length($colors) {
    $pop: nth($colors,$i);
    $new: $pop ($width * ($i - 1)), $pop ($width * $i);
    $gradient: join($gradient, $new, comma);
  }

  @return linear-gradient($position, $gradient);
}

And how to use it:

.rainbow {
  @include background-image(stripes(left, $rainbow));
}

Jina has posted a demo and explanation on CodePen.

(The real lesson here is that all the colors of the rainbow are acceptable CSS color keywords. Go forth and queer the web.)

Recent Articles

  1. Close-up of keys on an old Spanish typewriter, part of the space bar, a, s, d, z, x, and MAYÚSCULAS (capslock) with release above it
    Article post type

    Designing for User Font-size and Zoom

    Using modern CSS units and math functions

    When I tried setting my browser font-size preferences, I found it broke more sites than it improved, and I quickly moved back to the default. So what went wrong, and how can we fix it?

    see all Article posts
  2. OddContrast displays P3 gamut range in Oklch color format
    Article post type

    Make the Web a More Colorful Place!

    A guide to using new color spaces & formats with OddContrast

    OddBird’s color tool not only checks contrast ratios, but supports the new CSS color formats and spaces.

    see all Article posts
  3. see all Article posts