Any URL's added here will be added as
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
%h1 Rainbow with Sass & Compass %h2 My Rainbow: .my-rainbow %p For a website, I wanted to make a reusable mixin that uses CSS background gradients to create a colour stripe effect. My version was hard-coded to take 8 colour values. It also was pretty verbose. Finally, it only allowed stripes to go from left to right. %p I knew it could be done much better, so I %a(href="https://twitter.com/jina/status/225811628338323458") tweeted out a request for a Sass expert to show me a better way to write my mixin. %p Shortly after I tweeted that, I received an %a(href="https://twitter.com/eriiicam/status/225830655622254592") amazing contribution from @eriiicam. I was amazed at what Sass is capable of doing. They look identical, but with his improvements, I can give it as many colours as I want, and I can have the stripes go in whichever direction I want. It's also not verbose like mine was. %h2 His Rainbow: .his-rainbow %p A huge thanks goes to Eric for his help on this. I thought it was so cool that I wanted to share it here. While I posted the idea for the mixin, I want to stress that Eric did the Sass Function. I hope you find it as helpful as I did.:)
@import compass $link: #369 body padding: 24px font: 16px/1.5 Helvetica, Arial, sans-serif background: #fff color: #444 a text-decoration: none &:link, &:visited color: $link &:hover, &:focus color: darken($link, 10%) &:active color: darken($link, 20%) h1, h2 margin: 0 padding: 1em 0 0 font-size: 1em text-transform: uppercase color: #888 h2 color: #666 // ------------------------------------------- // MY VERSION $stripe-width: 100% / 8 $stripe-1: #c00 $stripe-2: #f90 $stripe-3: #ff6 $stripe-4: #693 $stripe-5: #3cc $stripe-6: #09c $stripe-7: #33c $stripe-8: #96c =rainbow +background-image(linear-gradient(left, $stripe-1, $stripe-1 $stripe-width, $stripe-2 $stripe-width, $stripe-2 $stripe-width * 2, $stripe-3 $stripe-width * 2, $stripe-3 $stripe-width * 3, $stripe-4 $stripe-width * 3, $stripe-4 $stripe-width * 4, $stripe-5 $stripe-width * 4, $stripe-5 $stripe-width * 5, $stripe-6 $stripe-width * 5, $stripe-6 $stripe-width * 6, $stripe-7 $stripe-width * 6, $stripe-7 $stripe-width * 7, $stripe-8 $stripe-width * 7, $stripe-8)) .my-rainbow height: 1em +rainbow +box-shadow(0 1px 2px rgba(#000, .25) inset) // ------------------------------------------- // HIS VERSION // Using the above colours $colours: $stripe-1, $stripe-2, $stripe-3, $stripe-4, $stripe-5, $stripe-6, $stripe-7, $stripe-8 @function stripes($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) .his-rainbow height: 1em +background-image(stripes(left, ($colours))) +box-shadow(0 1px 2px rgba(#000, .25) inset)
Also see: Tab Triggers