Make a rainbow border like on CreativeMornings.com.

_rainbows.sass

@import compass/css3

// A lot of this is taken from Hugo Giraudel's post on CSS Tricks
// about this: http://css-tricks.com/striped-background-gradients/

// Create a rainbow-style border before or after an element.
//
// rainbows([$position, $size, $colors...])
@mixin rainbows($position, $size, $colors...)
  $stripe-width: 100% / length($colors)
  $gradient:     ()

  @for $i from 1 through length($colors)
    $item: nth($colors, $i)
    $dump: ()

    $dump: $item $stripe-width * ($i - 1), $item $stripe-width * $i

    $gradient: join($gradient, $dump, comma)

  @if $position == top
    &:before
      +rainbows-generic($position, $size)
      +background(linear-gradient(left, $gradient))
  @else if $position == bottom
    &:after
      +rainbows-generic($position, $size)
      +background(linear-gradient(left, $gradient))

// Styles for all borders, independent of what colors are being used
//
// rainbows-generic([$position, $size])
@mixin rainbows-generic($position, $size)
  content: ''
  display: block
  height: $size
  position: absolute
  left: 0
  right: 0
  line-height: 1
  z-index: 1

  @if $position == top
    top: 0
  @else if $position == bottom
    bottom: 0

example.sass

// An example of using the rainbows mixin

body
  +rainbows(top, 5px, blue, green)