Skip to main
Article

Sass Striped Backgrounds

by Miriam Suzanne on

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.

Stripes Function

Copy permalink to “Stripes Function”

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. see all Article posts
  2. Nested semicircles, from innermost and slowest to outermost and fastest-moving: nature, culture, governance, infrastructure, commerce, fashion
    Article post type

    When Our Tools Hold Us Back

    What happens if the ‘pace layers’ get out of sync?

    by Miriam Suzanne on

    Ask not just: How well does it work? But also: How well does it fail? What happens when something goes wrong? —Jeremy Keith

    see all Article posts
  3. Wireframe of card elements in different sized containers -- some laid out vertically in small spaces, others horizontal when there's room.
    Article post type

    Use the Right Container Query Syntax

    Size queries are stable, and shipping in browsers

    by Miriam Suzanne on

    Since we got a first look at a Container Queries prototype back in April 2021, the syntax has changed a few times. But now the spec is stable, browsers are getting ready to ship, and it’s time to make sure you’re using the same syntax they are!

    see all Article posts