Chapter 4 Manipulate color with ease

In this chapter of 'Sass and Compass for Designers' you will learn how to wield the color manipulation techniques of Sass and Compass.

Are you currently heading back to the color picker in Fireworks, Photoshop et el everytime you need to do a color manipulation? Perhaps you're working with an existing color and need a highlight variant of it; say a 10% tint. Creating that tint with Compass and Sass is as easy as this:

Tinting a color

.item {
	color: tint($existing-color, 10%);
}

You will also learn:

How to easily make conversions from hex to RGBA
Adjust hue, lightness and saturation
Lighten and darken colours
How to make colors transparent
Mix colors with one another

Trust me, once you master the Sass and Compass colour techniques, you’ll never open a colour picker again.

We can also nest conversions within one another - look crazy? Fear not, you can totally do this:

@include button-links(complement(lighten($color9,48%))

There's all sorts of amazing color functions. Here's just a selection we will cover:

Desaturate

a {
  background-color: desaturate($color1, 80%);
}

Transparentize

a {
  background-color: transparentize($color1, .5);
}

Convert to RGBA

a {
  background-color: rgba(red,.9);
}

In Chapter 5you'll learn about creating repsonsive grids with ease, the Sass and Compass way. You'll be using the responsive Compass grid plugin Susy to make a custom mobile first responsive grid system.

Sass & Compass For Designers