melted-rainbow.md

Melted Rainbow mixin with SASS + Compass

This a fork of Ericam Rainbow stripe (https://gist.github.com/ericam/3141010). I just want a melted rainbow.

Goals :

1. [done] Obtain a melted rainbow.
2. [pending] Delete the duplicate colors of the gradient.

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.
$colors: 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 - 1))
    $gradient: join($gradient, $new, comma)

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

Application:

By setting your colors into a list :

$colors: red orange yellow green blue indigo violet

.rainbow
 +background-image(rainbow(top, $colors))

Or pass them all as an argument :

 +background-image(rainbow(top, (red, orange, yellow, green, blue, indigo, violet)))