clubmate.fi

A good[ish] website

Web development blog, loads of UI and JavaScript topics

How to use Compass color helper functions

Filed under: Styling— Tagged with: compass, sass

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.

See a Demo eJHbu

Comments would go here, but the commenting system isn’t ready yet, sorry.

  • © 2022 Antti Hiljá
  • About
  • All rights reserved yadda yadda.
  • I can put just about anything here, no one reads the footer anyways.
  • I love u!