SASS and Colour

One of the things I love about SASS is how it makes colour so mutable and interactive. Traditionally I’d preset my colours laboriously in Photoshop and transfer them to the CSS file via cut-and-paste, going back and forth to tweak hues and shades. Or I’d stick to basic, easily remembered values such as #ccc (shortcut for #cccccc, a light grey).

SASS’s variables and colour functions change all that.

Take the following code block:

	h2 {
		padding: 0.2em 0.5em;
		background: lighten(rgba($accent_colour, 0.7), 80%);	
		clear: both;
		font-weight: 500;
		text-align: right;
	}

I’ve already defined the accent_colour, so for its background colour I just take the variable, and pass it to the lighten function, and lighten it by 80%. Easy, and useful.

But wait, there’s more! You’ll see I’ve also used the rgba function to set the opacity of the background colour to a value of 0.7, without having to write out the entire rgba(0,0,255,0.7) value. The rgba function even allows me to pass hex colours to be transparentised, like so: rgba(#ccc, 0.6). Almost too easy. The usual caveats about checking the resulting colours for appropriate contrast levels apply (and, usefully, there’s a contrast function that you can use to ensure the colours you generate conform to accessibility standards).