Working with Sass & Compass offers a lot of tools that enhance our ability to work with color in the website design process. From simplified opacity to mixing and matching colors on the fly, utilizing Sass & Compass has become a irreplaceable part of our front end workflow. I’m going to over a few basic functions that have transformed how I work with color in CSS and that I personally use everyday. There’s plenty more than these few snippets out there.
Variables
Rather than have to remember dozens of esoteric hex values, Sass let’s us store commonly utilized colors as variables.
[css]$blue: #2B4C57;[/css]
Now, if I want to give an element a blue background.
Vanilla css:
[css]element {
background-color: #2B4C57;
}[/css]
Sass:
[css]element {
background-color: $blue;
}[/css]
If further down the road, we need to change the blue color slightly, rather than having to find and replace #2B4C57 in the stylesheet, we can simply change the value in the variable and every element that references that variable will update accordingly.
Shades
Sass simplifies working with shades of a base color by providing 2 basic functions; lighten, and darken. The syntax is as follows:
[css]lighten($blue, 20);[/css]
This will return the hex value of the color that is 20% lighter than the base $blue.
Darken works in exactly the same way, only will return the shade that is 20% darker.
[css]darken($blue, 20);[/css]
This is a great boon when working with predominantly monochromatic color schemes, as we can now declare a few base color variables and mix and match shades of those colors to our hearts content, without ever having to reference a color mixer.
Opacity
In vanilla css, rgba() is used to pass a rgb color with an alpha value, representing the opacity of the color. The problem is that rgba() only accepts rgb values rather than the hex code colors many of us are used to working with. This presents a situation where you’ll have to go into your favorite color mixer and write down the rgb value for the color in question. Sass simplifies the process by allowing us to pass hex values, or even better, variables, as the first argument of the rgba() function.
vanilla css:
[css]rgba(43, 76, 87, 0.5);[/css]
sass:
[css]rgba($blue, 0.5);[/css]
There’s a lot more where these came from. These represent just a small taste of the functions Sass & Compass provides when working with color. If you’re still curious, here’s a fine resource.
