Skip to content

Instantly share code, notes, and snippets.

@karlbright

karlbright/pop-stripe.md

Created July 19, 2012 04:38
Show Gist options
  • Save karlbright/3140784 to your computer and use it in GitHub Desktop.
Save karlbright/3140784 to your computer and use it in GitHub Desktop.
Download ZIP
Rainbow stripe mixin with SCSS + Compass
Raw
pop-stripe.md

Rainbow stripe mixin with SCSS + Compass

Usage

div
  height: 100px
  width: 100px

div.rainbow-1
  +striped
  height: 100px
  width: 100px

div
  height: 100px
  width: 100px

div.rainbow-2
  +striped(2,(red,blue))

Raw
rainbow.sass
=striped($stripe-colors: (red,lime,blue,lime))
$stripe-count: length($stripe-colors)
$stripe-width: 100% / $stripe-count
$current-stripe-count: 0
$stripe-stops:()
$legacy-stripe-stops: $stripe-stops
@each $color in $stripe-colors
$stripe-stops: $stripe-stops, $color $stripe-width * $current-stripe-count, $color $stripe-width * ($current-stripe-count + 1)
$current-stripe-count: $current-stripe-count + 1
$current-stripe-count: 0
@each $color in $stripe-colors
$legacy-stripe-stops: $legacy-stripe-stops, color-stop(#{$stripe-width * $current-stripe-count},#{$color}), color-stop(#{$stripe-width * ($current-stripe-count + 1)},#{$color})
$current-stripe-count: $current-stripe-count + 1
+experimental-value(background-image,"linear(right, #{$legacy-stripe-stops})",false,true,false,false,false,false)
+experimental-value(background-image,"linear-gradient(right, #{$stripe-stops})")
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment