Tutorial: Sass Colours with SassyColours

So last week I posted the SassyColours project, and this week I want to give a bit of a run through on how it works and how I would use it. I would like to start with how I believe variables should be used for colours in sass projects and explain why. Some of you may not agree with me on some of this, but I am keen to hear what you have to say so feel free to comment below.

Following the white rabbit. Sass variables should be tidy.

Have you ever been through a .scss file only to find that variables are inconsistant or changed half way through? Have you found that another designer/developer has been too specific with variables in sass projects? I have. I will give you an example of what I mean:


$blue: #273ACC;

$lightblue: #8a95e9;

$linkcolour: $blue;

$linkhover: $lightblue;

a{

color: $linkcolour;

}

a:hover{

color: $linkhover;

}

You can probably see how this is going to get messy with a whole website full of colours. You start by finding one link colour, finding where the variable is set for it ($link for example) only to find that it is set by another variable ($blue) at which point you then have to find where that is set. Another irritation of this is the fact that we have used $blue as the variable name. A much tidier example of this might be as follows:


$colour-1: #273ACC;

$colour-1-variation: #8a95e9;

a{

color: $colour-1;

}

a:hover{

color: $colour-1-variation;

}

Now we can go a step further if you like consistency and set the variation for the first colour automatically. This is what I would do to maintain consistency if I wanted to change the link colour scheme across the entire site:


$colour-1: #273ACC;

$colour-1-variation: lighten($colour, 25%);

This would lighten whatever $colour-1 is by 25%.

I would also suggest a naming convention for multiple variations of a colour scheme but will save that for another post.

Colour by number

I also think it is important to use colour variables in a number format rather than something descriptive. For example, I would use $colour-1, $colour-2, $colour-3 rather than (what I have seen all too often) $primaryColour, $secondaryColour, $teriaryColour; here is part of my argument as to why:

The correct use of these terms do not identify the relationship between that on the website and the name of the variable. They describe the type of colour explicitly: A Primary colour is Red, Yellow or Blue. A Secondary colour is between each of those (Orange, Green or Purple), and a Tertiary colour is between a Primary and Secondary colour. So it can start to get confusing when you see $primaryColour: purple in the Sass file.

Again, another post for suggested naming conventions….

The other reason you might want to set colours by numbers in Sass is it is great for creating loops. We need to start thinking more like developers when coding Sass and less like designers. So I would recommend taking easy logic into account here.

Finally, Using SassyColours for your Sass Colour Scheme

Get SassyColours from my Git repo

First you want to import the partial for sassycolours into your style.scssĀ (the git repo has it in a partials folder):

@import 'partials/sassycolours';

Next, you will want to set up your first 5 colours as a Sass List. for this example i am using my favorite scheme Triad, and the hex value #7EA7D8 as my base colour to get the rest of the palette:

$colours: sassycolours(#7EA7D8, 'triad');

This will return a list of hex values and assign the list to the varible $colours. Now that we have this list, we can do a few things with it. We can make a loop and assign each colour to 1 variable (this would be the lazy-coder way and something i would advise getting used to), or we can assign each item on the list to a colour variable manually.

Accessing the list manually

To access a variable on the list, you will need to use the Sass function nth() this will get you the nth (‘enth’ as in ‘the enth degree’) value on the list. Specify the list variable, and the number of the value you want:

$colour-1: nth($colours, 1);
$colour-2: nth($colours, 2);
$colour-3: nth($colours, 3);
$colour-4: nth($colours, 4);
$colour-5: nth($colours, 5);

Now you have your colour scheme as logical variables to use within your project. The Triad scheme will give the 1st, 3rd and 5th values as the direct Triad results with variations to the 1st and 3rd colours to make up colours 2 and 4.

Check it out for yourself and remember not to reassign these to variables named $link-colour or anything descriptive as it might mean confusion down the track.

Happy Sassing!

Leave a Reply