Let’s get SASSy – the world of CSS pre-processors

Let’s get SASSy – the world of CSS pre-processors

Would you like to make updating your website styling a breeze? Change colour schemes across your entire site in the blink of an eye? Want easier to maintain, consistently legible code? Here at Exact Abacus we do, and that’s why we’ve decided to dive into CSS pre-processors, incorporating them into the next version of our 3EX.NET system.

So, uhh… What’s CSS?

CSS stands for Cascading Stylesheets. Even if you’ve never heard either term before, chances are that your browser is accessing them right now. This is simplifying things a little, but when you view a website online you are looking at a combination of two things – Data (the information on the page) and styling. The information is what you came to read; blog posts, tweets on Twitter, Facebook timeline updates, your favourite news site, today’s weather – you get the picture. Often the information will be logically structured into sections. For example, a blog article with a featured image, a header, a sub header, a timestamp and a comment feed.

Without Cascading Stylesheets, websites would look very bland. Black text on white pages, with blue links and images appearing seemingly at-random throughout the text. CSS files control the styling of pages. They are “hooked-in” to pages that you look at online, and they can tell your browser a whole load of information on how pages should be laid out as well as a vast amount of additional element styling information. This includes where images should sit amongst text, what colour the header should be, how blog quotes appear, the font used in normal paragraphs, what happens when you move your mouse over a menu item and so on.

How about a CSS preprocessor, what’s that?

First of all, we have to admit something to ourselves, CSS has limitations. There, I said it.

I’m sorry, but it’s true. Many functions that are available across a whole host of different programming languages are not available within CSS. One of its greatest benefits (legibility, making it relatively easy to pick up and start coding with) is also one of its biggest weaknesses – it is relatively limited in what you can do with it.

A pre-processor allows us to write our stylesheets in a slightly different language. We can add elements to our code that normally wouldn’t be available in a stylesheet, and the files we create are then processed and “spat out” as a regular CSS file. One of the most convenient features for any web developer is that pre-processing enables us to use variables within our code. Here’s an example of a paragraph style and two header styles in basic, plain old CSS:

.blog-paragraph-style {																font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;																font-size: 14px;																line-height: 1.2em;																font-weight: normal; 																text-transform: uppercase;																color: #ccc;																}
.blog-header {																	font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;																	font-size: 24px;																	line-height: 1.2em;																	font-weight: normal; 																	text-transform: uppercase;																	color: #ccc;																	}
.blog-sub-header {																		font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;																		font-size: 18px;																		line-height: 1.2em;																		font-weight: normal; 																		text-transform: uppercase;																		color: #ccc;																		}

Notice how I’m repeating myself in those snippets? The only thing that’s really changing in this example is that font size, but each element still needs to have all the different attributes set in order for it to be properly styled.

Now here’s the same thing in SASS, using a feature called mixins:

@mixin default-text{																			font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;																			font-size: 14px;																			line-height: 1.2em;																			font-weight: normal; 																			text-transform: uppercase;																			color: #ccc;																			}
.blog-paragraph-style{																				@include default-text;																				}																																								.blog-header {																				@include default-text;																				font-size: 24px;																				} 																																								.blog-sub-header {																				@include default-text;																				font-size: 18px;																				}

Although this is an extremely basic example, you can see above that mixins allow us to store multiple style attributes within variables.

Of course it’s not all just storing and returning variables. This is just a tiny element of what makes pre-processing great. SASS allows us to perform calculations, import CSS without requiring an HTTP request, nest code, and more.

What is SASS?

There are a couple of popular CSS pre-processors currently available, and SASS is one of them. SASS stands for Syntactically Awesome Stylesheets.

How can SASS help me?

One of the most important concepts within any type of coding is “DRY” – it stands for Don’t Repeat Yourself. As seen in the previous example, up until CSS pre-processors it was often necessary to repeat yourself in order to properly define styles for all elements. SASS helps to take this away; helping improve workflow and speed.

CSS code output by SASS is exported in a standard legible format. Some developers will have their “own way” of writing code. A particular example here at Exact Abacus is where we tend to keep stylesheet rules on one line instead of breaking them up. SASS ensures that regardless of who is working on code, the output will always be in the same format.

Variables and calculations being added allows the potential for complex functions to be created, which opens up a whole new world to traditional CSS. So much more can be accomplished in a short time. For example, a website can have its entire colour scheme altered by editing 5 variable colour values at the start of the file, instead of poring through the code of every element in the entire site to update every single hex value.

In conclusion

CSS pre-processing has been around for a while now, and people who’ve already made the switch are already seeing benefits in an improved workflow – timescales are reduced as writing and maintaining code becomes quicker and simpler, functions allow complexity where required, nesting styles helps with logical structure and the output CSS is clean to read.

In short; if you’ve not already started using a CSS pre-processor, it’s probably about time you did.

by Paul Devine on 11/07/2014

ISO logo Microsoft Partner logo UKWA logo

© Copyright Exact Abacus Ltd, 2017 | Powered & Designed by Exact Abacus

Please sign in to write a review
Forgot your password?