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) ...

Get Sass and Compass for Designers now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.