clubmate.fi

How to use Compass color helper functions

Here we’ll look into the Color Helpers.

Basic usage

Helpers are not mixins. This of course wont work:

@include adjust-lightness($color, $amount);

But they’re used like this:

.module {
  // This will darken the red a bit
  color: adjust-lightness(red, -20);
}

When it comes to color, you got the following Helpers at your disposal.

• adjust-lightness($color, $amount)
• adjust-saturation($color, $amount)
• scale-lightness($color, $amount)
• scale-saturation($color, $amount)
• shade($color, $percentage)
• tint($color, $percentage)

Compass documentation

Making a color scheme

Making color pallets for websites comes much easier with these Helpers. Take a look at the code in the demo below.