Skip to content

Instantly share code, notes, and snippets.

@rjfranco
Created July 19, 2012 04:59
Show Gist options
  • Save rjfranco/3140845 to your computer and use it in GitHub Desktop.
Save rjfranco/3140845 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. Use variables for colors so they can be swapped out for different colors.
  2. 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. The colors are defined twice for the color starts and stops. Can this be done better?
  4. 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:

$stripe-width:  100% / 8;

$pop-1: red;
$pop-2: orange;
$pop-3: yellow;
$pop-4: green;
$pop-5: aqua;
$pop-6: blue;
$pop-7: indigo;
$pop-8: violet;

Mixin:

@mixin pop-stripe {
  @include background-image(linear-gradient(left,
    $pop-1,
    $pop-1 $stripe-width,
    $pop-2 $stripe-width,
    $pop-2 $stripe-width * 2,
    $pop-3 $stripe-width * 2,
    $pop-3 $stripe-width * 3,
    $pop-4 $stripe-width * 3,
    $pop-4 $stripe-width * 4,
    $pop-5 $stripe-width * 4,
    $pop-5 $stripe-width * 5,
    $pop-6 $stripe-width * 5,
    $pop-6 $stripe-width * 6,
    $pop-7 $stripe-width * 6,
    $pop-7 $stripe-width * 7,
    $pop-8 $stripe-width * 7,
    $pop-8));
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment