How to use Compass Helper functions

Compass has enormous amounts of power when you dive into it. Here we'll look into the Color Helpers.

Basic usage

Helpers are not mixins. This of course wont work:

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

You use them 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.

See the Pen eJHbu by hilja (@hilja) on CodePen

Club-Mate, the beverage →