Colour me Sass-y
On This Page:
I don’t tend to have to worry about what colours to use on a site. I generally don’t ‘design’ anymore and concentrate on coding the front-end of a project.
That being said, there’s times when I need to manipulate the colours I’m given in a design in the CSS. Maybe quickly make a brand colour have an alpha transparency on a overlay or some such other thing.
Sass helps me do this and more. The colour functions built into Sass are pretty amazingly mathematical and yet so easy to implement. In this post I’m going to quickly go through them all and mention a couple of ‘extra’ ones that are in Compass but not in Sass by default.
darken & lighten
Two colour functions I often use when ‘playing’ around with some Sass ideas and sometime use, if appropriate, on client projects are darken and lighten. Each take the hex value of the colour (be it a hex value, rgb or $variable) you pass it, converts it into its HSL equivalent then makes the adjustments. The adjustment is declared as a percentage for these two functions.
.box-1 { background-color: lighten(#D13400, 30%); } .box-2 { background-color: darken(#D13400, 30%); }
would give
RGBa
You can easily give the colour you’re using an alpha transparency. You give the colour you require a levle of transparency from 0 to 1.
.box-3 { background-color: rgba(#D13400, .6); }
would give an rgba color output.
desaturate & saturate
These adjust the saturation (funnily enough) of the color by converting the hex value to HSL again. This like darkness and lighten requires a percentage to be passed.
.box-4 { background-color: saturate(#D13400, 40%); } .box-5 { background-color: desaturate(#D13400, 40%); }
which gives more and less saturated colors respectively.
complement & invert
Here’s two I don’t think I’ve ever used. Again the hex colour is converted into HSL and then gets adjusted. For these you only pass the colour you’re wishing to adjust. No values or percentages.
.box-6 { background-color: complement($color); } .box-7 { background-color: invert($color); }
would give the complementary and inverted color versions.
adjust-hue
Another I can’t recall ever needing to use, again it converts the hex color value to HSL and requires a degree value(unit optional) being passed to calculate the adjustment.
.box-8 { background-color: adjust-hue($color, 40deg); }
gives a hue-adjusted color output.
grayscale
I have never used this and struggle to figure out why one ever would, really. All the same, this (again) converts the hex to HSL creating a grayscale alternative to the color passed
.box-9 { background-color: grayscale($color); }
gives a grayscale version of the color.
Something’s missing (for me)
I’ve dabbled with Compass. I don’t use it on any projects I work on as I quite like creating my own ‘things’ as much as Chris is doing a frickin’ fantastic job with it. There’s nothing I’ve missed not having when running with my own mixin library (yes, I know Compass does a (heck of a) lot more).
Two function I really liked in Compass that are native to Sass are tint & shade. These work great for creating things like a colour pallete) so I use the following two functions to recreate what Compass gets tint and shade to do and have them in my mixin library ready to go.
Using the RGB mix function I can create the desired effect. Mix takes two colours and mixes them together with the given weight (percentage).
mix($color-1, $color-2, [$weight])
So if we used black and white for $color-1 we can create the tint and shade functions.
@function tint($color, $percent){ @return mix(white, $color, $percent); }
@function shade($color, $percent){ @return mix(black, $color, $percent); }
Which you would simply use like this.
.box-10 { background-color: tint($color, 40%); } .box-11 { background-color: shade($color, 40%); }
which gives tinted and shaded color variations.
The tint and shade functions are found in my Sassifaction mixin library.
Like I said, I generally only use rgba, lighten, darken, tint and shade when I’m either having a play on codepen or when a project allows. It’s pretty nice and easy to only have to pass some simple information and get a hex value without having to worry about how it got there.
Go forth and colour yourself Sass-y.
