We use the SASS (Syntactically Awesome StyleSheets) CSS preprocessor here at Createful to compile CSS for most of our projects. Whilst working with SASS, there are a number of handy things I have picked up that have proven to be invaluable, so I thought I would share a few…

I also recently went through the new Codecademy SASS track to see if it could teach me anything I didn’t already know, and I was surprised to find that there were a number of things I was not aware of, so it’s definitely worth a look.

Importing an external CSS file

This may be an obvious one, but it was something I discovered only recently; you can import external CSS files into your SCSS files. I have found that this is especially useful for Google Fonts; allowing you to reference Google Fonts CSS files remotely without having to add separate calls to them in your HTML.

@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600');

Nesting CSS properties

This is something I learnt from the Codecademy course; as well as nesting element styles, separate properties can also be nested. The usefulness of this can be questioned, but it’s a handy thing to keep in mind if the occasion arises.

Nesting font and text styles

The example below shows font properties (‘family’, ‘size’ and ‘weight’) and text properties (‘align’, ‘decoration’ and ‘transform’) nested inside a selector:

.nested-fontstyle {
	font : {
		family: 'Helvetica Neue', Arial, sans-serif;
		size: 2.5rem;
		weight: 100;
	}
	text : {
		align: right;
		decoration: underline;
		transform: uppercase;
	}
}

Nesting border styles

The example below shows border properties (‘width’, ‘color’ and ‘style’) nested inside a selector:

.nested-borderstyle {
	width: 100px;
	height: 100px;
	border : {
		width: 4px;
		color: black;
		style: solid;
	}
}

Using hex colours and variables as RGBA values

I don’t know if it’s just me, but I find RGB colour values to be quite hard to work with, as they look something like this:

rgb(255, 0, 0)

The numbers refer to the ‘Red’, ‘Green’, and ‘Blue’ colour values in that order. However, sometimes I’d like to apply a semi-transparent colour to an element, and this can only be done by referencing an RGB colour and applying the degree of opacity (or ‘alpha’). In this case, an RGBA colour would be used, and would look something like this:

rgba(255, 0, 0, 0.5)

The numbers refer to the ‘Red’, ‘Green’, and ‘Blue’ colour values, followed by the ‘Alpha’ value. Luckily SASS can do some clever things for us with colours, and allow us to use other values in place of the RGB value, to make things a bit more versatile, accessible and readable.

Hex colours

A hex colour code can be inserted in place of the RGB value as in the example below, and will be converted into the RGB value in the outputted CSS file:

.rgba-hex {
	background-color: rgba(#12d4e0, 0.5);
}

Named colours

Standard named web colours can also be used in place of the RGB value, as in the example below:

.rgba-named {
	background-color: rgba(gold, 0.5);
}

Colours as variables

Colours set as a named variable can also be used; if a colour variable has been already set, it can be inserted in place of the RGB value, as in the example below:

$bright-turquoise: #12d4e0;

.rgba-variable {
	background-color: rgba($bright-turquoise, 0.5);
}

Using @each to automatically apply colours to elements

I’ve used this on a few projects now and it’s a massive markup saver. So here is the scenario:

  • I have four 100px x 100px divs in a row, each with the class ‘.colour-box’;
  • Each box also has a separate colour class assigned – either ‘blue’, ‘pink’, ‘yellow’ or ‘green’, which corresponds to the background colour I want the box to have.

This is what I want the boxes to look like:

SASS @each directive example with coloured squares

HTML

<div class="colour-box blue"></div>

<div class="colour-box pink"></div>

<div class="colour-box yellow"></div>

<div class="colour-box green"></div>

To achieve this with CSS, I would have to:

  • Assign the width and the height of the box to the class ‘.colour-box’;
  • Create separate selectors for each colour class and assign each background colour separately.

This would understandably create a lot of markup, especially if I wanted to add more colour boxes later. Even more markup if I want to assign a different colour text or button to each box. But we can make this easier on ourselves with SASS and the @each directive.

SASS

The first thing to do is to assign the colours I want to use to named variables, as in the example below:

// Colour variables
$bright-turquoise: #12d4e0;
$razzle-dazzle-rose: #ff34cd;
$yellow-orange: #ffb534;
$lima: #82d01c;

Then I create a list with the variable name ‘$colour-list’ containing the colour class names and their paired variable colours, as below:

// List of colours
$colour-list: (blue:$bright-turquoise, pink:$razzle-dazzle-rose, yellow:$yellow-orange, green:$lima);

An @each directive is then created which:

  • Looks at each div with the class ‘.colour-box’;
  • References the ‘$colour-list’;
  • Matches the colour class with the variable colour before assigning that to the background colour.

Then in future, if I ever want to add new colour boxes, I just need to add their pairing to the ‘$colour-list’ (and make sure the div with that colour class has been added to the HTML, too).

// This '@each directive' looks at the colour class on the element and adds the appropriate background colour via the $colour-list
@each $boxclass, $colour in $colour-list {
	.colour-box.#{$boxclass} {
		width: 100px;
		height: 100px;
		background-color: $colour;
	}
}

Detect background colour and apply contrasting colour text and buttons

The scenario for this tip is as follows:

  • I have four banner divs, each with the class ‘.colour-banner’;
  • Each banner div contains a line of text and a styled button, and is assigned a separate colour class – either ‘dark’, ‘light’, ‘pink’ or ‘darkpink’;
  • These colour classes correspond to the background colour I want each banner box to have.

This is what I want the banners to look like; you should notice that:

  • The darker coloured boxes contain a white coloured button and text;
  • The lighter coloured boxes contain a black coloured button and text.

SASS @if example showing contrasting text and button colour on top of background

HTML

<div class="colour-banner dark">
	Dark Background
	<a href="#" class="button">Button</a>
</div>

<div class="colour-banner light">
	Light Background
	<a href="#" class="button">Button</a>
</div>

<div class="colour-banner pink">
	Pink Background
	<a href="#" class="button">Button</a>
</div>

<div class="colour-banner darkpink">
	Dark Pink Background
	<a href="#" class="button">Button</a>
</div>

I want the ‘lightness‘ (a SASS function which detects how light or dark a colour is) of the background colour for each box to be assessed, and the appropriate colour text and button to be used to create good contrast:

  • If the background colour is a darker shade, the text and button colour is set to white;
  • If the background colour is a lighter shade, the text and button colour is set to black.

SASS

First of all, I’m going to create a mixin called ‘smart-textcolour’ which takes an argument called ‘$bgcolor’. Within the mixin, an @if/else directive is added, which:

  • Looks at the ‘lightness’ of the background colour passed through (via the argument);
  • If’ the ‘lightness’ is more than 50%, the colour of the text and button inside the element is set to black;
  • else’, the colour of the text and button inside the element is set to white;
  • Within this mixin, the background colour of the banner box is also set, which again, comes through from the argument passed in.
// Mixin containing @if statement
@mixin smart-textcolor($bgcolour) {
	@if lightness($bgcolour) > 50% {
		color: #000;
		.button {
			&:hover {
				background-color: #000;
				color: $bgcolour;
			}
		}
	} @else {
		color: #fff;
		.button {
			&:hover {
				background-color: #fff;
				color: $bgcolour;
			}
		}
	}
	
	background-color: $bgcolour;
}

I then apply the mixin to the ‘.colour-banner’ class selector; referencing each background colour class I have currently as child selectors and applying the mixin to each one, passing in the background colour as the argument. The mixin will do the rest; checking the background colour of each div and applying the correct colour to its contents.

// Styled div calling 'smart-textcolour' mixin and passing in background colour
.colour-banner {
	text-align: center;
	margin-bottom: 1rem;
	padding: 1.5rem;
	&.dark {
		@include smart-textcolor(#000);
	}
	&.light {
		@include smart-textcolor(#fff);
	}
	&.pink {
		@include smart-textcolor($razzle-dazzle-rose);
	}
	&.darkpink {
		@include smart-textcolor(darken($razzle-dazzle-rose, 40%));
	}
}

Do you see yourself using any of these tips in any of your future projects? Perhaps you know a better way of achieving some of these things with SASS? Or maybe with an entirely different method? We would love to know, so feel free to leave a comment!

Useful Resources