Skip to content

Instantly share code, notes, and snippets.

@mirisuzanne
Created July 19, 2012 05:42
Show Gist options
  • Save mirisuzanne/3141010 to your computer and use it in GitHub Desktop.
Save mirisuzanne/3141010 to your computer and use it in GitHub Desktop.
Rainbow stripe mixin with SCSS + Compass

Rainbow stripe mixin with SCSS + Compass

I'm trying to make a horizontal rainbow stripe background gradient mixin, but I feel like this is way too verbose. How can it be better?

Goals:

  1. [check] Use variables for colors so they can be swapped out for different colors.
  2. [check] The widths are hard coded for 8 colors. Can it be done smarter where it adjusts to the number of colors you add? Or is that asking too much?
  3. [check] The colors are defined twice for the color starts and stops. Can this be done better?
  4. [see below] Right now I define the colors as variables at the top level, then pass them in the mixin. Should they instead be created inside the mixin and then colors are brought in as arguments? Or does that matter?

Variables:

// 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.
$mycolors: red orange yellow green blue indigo violet;

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 rainbow($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);
}

Application:

.rainbow { 
  @include background-image(rainbow(left, $colors));
}
@karlbright
Copy link

Wow, so there is a type-of function. How did i not see this in the documentation? @_@

It seems that there is a bunch of sass functions that i completely missed. compact() is new to me and i was always looking for typeof over type-of. Going back to SASS documentation now :D

@mirisuzanne
Copy link
Author

The Sass docs are so hard to navigate, I'm always surprised when I do find something. :)

@jina
Copy link

jina commented Jul 19, 2012

Team Sass Design will fix that. ;)

@mirisuzanne
Copy link
Author

So I've heard. Can't wait. :)

Let me know if there's any way I can help.

@karlbright
Copy link

So this was definitely a good exercise to help me realise that there is a lot of hidden potential in sass and compass. Now have the source open browsing the functions that are provided. I wish i had done this sooner.

@jina
Copy link

jina commented Jul 19, 2012

Apologies, I don't mean to turn this into a support thread. But I was hoping you (or someone reading along) could help me. :)

Firstly, is this Sass 3.2 specific? I'm using Middleman (just to rapidly prototype) and last I checked, it doesn't use 3.2 yet (correct me if I'm wrong), so I'm wondering if that's the issue. I might just need to go ahead and get this site moved out into a regular Rails app.

If that's not the issue, any guidance toward what I did wrong would be greatly appreciated. :-) The only change I made was changing "rainbow" to "pop-stripe" — which is what we're calling our stripe thingy), switching to the original Sass syntax (which is preferred at work), and British spellings (another preference with the guys I work with). :-)

Variable

$stripe-colours: red orange yellow green blue indigo violet

Function

@function pop-stripe($position, $colours)
  $colours: if(type-of($colours) != 'list', compact($colours), $colours)
  $gradient: compact()
  $width: 100% / length($colours)

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

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

Usage

.pop-stripe
  +background-image(pop-stripe(left, ($stripe-colours)))

The Error I'm Getting

ArgumentError at /stylesheets/guide.css
wrong number of arguments (14 for 2)

I tried adding parentheses around it, but that didn't seem to work. I had a Ruby dev here with me look at it, too, and that didn't help either. :-P Does anyone have any ideas why I'm getting argument errors?

@karlbright
Copy link

Hey Jina,

I just tried this on a Middleman instance and it worked fine.

div
  +background-image(pop-stripe(right,(red, blue, green)))
  height: 200px
  width: 200px

@jina
Copy link

jina commented Jul 19, 2012

Oh cool I'll try that when I get into work tomorrow. Thanks! :) I knew it had to be something about parenthesis. :)

@karlbright
Copy link

Oh, silly me. I do have the 3.2 alpha installed of Sass.

You could just install that. I don't think Middleman has a version set? I could be wrong though :)

gem "sass", "~> 3.2.0.alpha.237"

@jina
Copy link

jina commented Jul 19, 2012

Ah, okay. Last time I tried I ran into some trouble, but I'll give it another go tomorrow. :)

@mirisuzanne
Copy link
Author

Yes, it's true. Sorry, I didn't think about it. Older versions of Middleman did have dependency issues with Sass 3.2, but the latest version of middleman does not. Upgrade both, and you should be fine.

@jina
Copy link

jina commented Jul 19, 2012

Oh sweet!!! That's awesome. Updating it the moment I get to my desk. Thanks again!!!

@jina
Copy link

jina commented Jul 19, 2012

IT WORKS!!! hugs all around!!!

@jina
Copy link

jina commented Jul 21, 2012

Check out the CodePen.io I made so you can see this in action: http://codepen.io/jina/pen/iosjp

@markuppatterns
Copy link

How to set different width to each color of stripe?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment