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. A measuring tape with both imperial and metric, then a ruler with only metric, and another ruler with combined units
    Article post type

    The Best CSS Unit Might Be a Combination

    We don’t have to choose between px and rem for spacing

    There are many articles and established CSS best-practices that rely on determining the correct or best units to use. Now that comparison functions are well supported in CSS, we don’t have to choose.

    see all Article posts
  2. diagram of the box model, content inside, then padding, border, and margins.
    Article post type

    Don’t Inherit the Box Model

    It’s time to stop spreading this out-dated practice

    Setting the box-sizing model to border-box is one of the few remaining CSS ‘resets’ used across most projects. But there are two common approaches, and the more popular choice will cause more problems than it solves.

    see all Article posts
  3. Miriam gesturing as she talks in a video thumbnail
    Article post type

    Visualizing Responsive Typography

    What do all the numbers in our clamp() do?

    There are multiple tools that can help create a fluid font-size calculation for CSS – generally expressed as a clamp() function combining em (or rem) with vw (or vi) units. But the results are difficult to understand at a glance, so I wanted to visualize what’s going on…

    see all Article posts