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 (currently in alpha) in order to run.

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.)

showing ‘code’…

(all)

orgs

  1. » code/oddbird

    OddBird

soon

  1. @ Generate Workshops | San Francisco, CA

  2. Dynamic CSS

    @ Generate New York | San Francisco, CA

  3. Keynote

    @ Design 4 Drupal | Boston, MA


2019

  1. @ Smashing Workshops | San Francisco, CA

  2. Dynamic CSS

    @ Smashing Conf | San Francisco, CA

  3. Dynamic CSS

    @ VueConf US | Tampa, FL

  4. @ Agile Denver | Denver, CO

  5. @ Covalence Conf | San Francisco, CA

2018

  1. Dynamic CSS

    @ Front Range Front-End | Denver, CO

  2. @ Agile Denver | Denver, CO

  3. Dynamic CSS

    @ Full Stack Fest | Barcelona, Spain

  4. Dynamic CSS

    @ JSConf US | Carlsbad, CA

  5. Dynamic CSS

    @ CSSConf Argentina | Buenos Aires, Argentina

  6. @ Boost Biz Ed | Westminster, CO

  7. @ Beyond Tellerand | Düsseldorf, Germany

  8. @ AIGA Colorado | Denver, CO

  9. @ Creative Connections | Denver, CO

  10. @ VueConf US | New Orleans, LA

  11. @ Tech Confluence | Denver, CO

2017

  1. @ Clarity | San Francisco, CA

  2. @ CSS Dev Conf | New Orleans, LA

  3. Code Patterns

    @ Refresh Denver | Denver, CO

  4. @ DjangoCon US | Spokane, WA

  5. @ Front Range Front End | Denver, CO

  6. @ UVA Scholars’ Lab | Charlottesville, VA

  7. @ Open Grounds | Charlottesville, VA

  8. @ Women's March | Washington, DC

  9. @ Small Rain | Fredrick, MD

  10. @ House Show | Silver Spring, MD

  11. @ House Show | Baltimore, MD

  12. @ Wooden Shoe Books | Philadelphia, PA

  13. @ in your ear | Washington, DC

  14. Code Patterns

    @ Gotham Sass | New York, NY

2016

  1. @ CSSDay.io | Chandler, AZ

  2. @ CSSConf 2016 | Boston, MA

  3. Code Patterns

    @ Clarity | San Francisco, CA

2015

  1. @ SassConf 2015 | Austin, TX

  2. @ Frontend Zurich | Zurich, Switzerland

  3. @ CSS Summit | Online

  4. @ WordCamp Denver | Denver, CO

  5. @ Future Insights Live | Las Vegas, NV

2014

  1. @ Zell Liew

    See Also: Learning Susy [book]

  2. @ SassConf 2014 | New York, NY

  3. @ BlendConf | Charlotte, NC

  4. @ Bmore Sass | Baltimore, MD

  5. @ Camp Sass | San Francisco, CA

  6. @ The Mixin | San Francisco, CA

2013

2012

2009