Sass and Compass for Designers

Background gradients

If you've dealt with background-gradients for any length of time, you'll know there was a time of madness where we needed to write gazillions of different syntaxes in the CSS to ensure cross-browser compatibility. Thankfully, Compass lets us write one mixin with a single syntax and it produces all the necessary CSS to make browsers happy. Let's use this to spruce up the main header area. Currently we have a solid background color and a border below. Let's remove this and instead use a single background gradient and box shadow. Here are the two mixins being used:

@include background(linear-gradient(to bottom, darken($color-pink, 10%) 0px, darken($color-pink, 10%) 4px, lighten(complement($color-pink), 10%) 4px, complement($color-pink) ...