Learning Sass With CodePen, Part Four: Color

As a CSS pre-processor, Sass has two particular advantages for web developers, especially those who are still obligated to support IE8: it offers excellent color manipulation, while allowing us to use HSL in older browsers.

The initial, obvious advantage is that Sass allows you to state colors as variables:

$base-color: #93aacd;
button {
	background: $base-color;
}

This makes referencing colors much easier, especially in long, complex stylesheets.

The Advantages of Using HSL in Sass

I’ve written previously on the reasons web developers and designers should be using HSL colors in CSS.

However, there’s one major issue: IE8 has no understanding of HSL at all. Confronted with an HSL CSS declaration:

body {
	background: hsl(30,100%,50%);
}

…the page background won’t change from the default white in IE8.

However, if we make the same statement in Sass, the preprocessor will automatically convert the HSL color to hexadecimal in the final CSS output. This is achievable due to the fact that hexadecimal and hsl have that same gamut, i.e. they cover the same range of colors; it’s just that HSL is far easier to write and adjust.

You can see this for yourself in the associated CodePen. Just right-click anywhere in the preview pane, choose Inspect Element, select the <body> element, and take a look at the color applied to the background: it’s a keyword, despite the fact that the color was originally applied as HSL. That’s Sass magic.

This means that you can employ the usefulness of HSL in stylesheets without worrying about browser incompatibility.

There are two more handy pairs of color functions in Sass that relate directly to HSL:

Brightness & Darkness, Hue & Saturation

Sass also features the darken and lighten color functions. Returning to our earlier example of a color variable:

$base-color: hsl(30, 100%, 40%);

.color-chip { width: 40%; background: $base-color; }

We can use lighten to raise the color by a percentage:

.brighter {
	@extend .color-chip;
	background: lighten($base-color, 10%);
}

Visually, this is exactly equivalent to applying the same color in HSL and moving up the luminosity component by 10%:

.brighter {
    @extend .color-chip;
    background: hsl(30, 100%, 50%);
}

The result:

$base-color:

hsl(30, 100%, 40%)

lighten($base-color, 10%);

hsl(30, 100%, 50%)

Note that you can use the Sass function on any CSS color you wish: hex, rgb, even a color keyword. Sass actually converts the color to HSL to apply the luminosity shift before converting it back into the correct hexadecimal or keyword value for your CSS output.

Similarly, with darken:

.darker {
	@extend .color-chip;
	background: darken($base-color, 10%);
}

…and saturation:

.more-saturated {
	@extend .color-chip;
	background: saturate($base-color, 10%);
}

The latter, given our original color in HSL, is equivalent to:

.more-saturated {
    @extend .color-chip;
    background: hsl(30, 100%, 40%);
}

Also, desaturation:

.less-saturated {
	@extend .color-chip;
	background: desaturate($base-color, 10%);
}

The equivalency between the Sass color functions and HSL stumbles slightly with adjust-hue, which uses percentage points for adjustments. In native HSL, hue changes are measured in degrees… but Sass rather confusingly applies the percentage amount as a degree, meaning that the following:

.less-saturated {
	@extend .color-chip;
	background: adjust-hue($base-color, 10%);
}

…will move the hue by 10 degrees.

All of these colors are translated “under the hood” by Sass into hexadecimal… but by starting with HSL, you have a native understanding of exactly what is going on, and can move back and forth between HSL and Sass color functions with ease.

It’s possible to take colors in Sass much further, even to the extent of entirely remapping color keywords to more appropriate hues while making new ones, as I have in my New Defaults.

Photograph by Mathias Appel, used under a CC0 license

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/emEeZr