Nobody likes doing things the hard way, and for me, improving the way that I work from day to day can only be a bonus. This is certainly no different for CSS, so when I got talking to a peer at the Ampersand Conference last month about CSS pre-processors, I thought I’d check them out to see what they had to offer. Needless to say, I won’t be looking back.

At its core, a CSS pre-processor allows you to do things that wouldn’t normally be possible in CSS (variables, nested selectors & mix-ins to name a few) and then exports a valid, standards compliant version of that mark-up for you.

The example below shows some basic SASS nesting and variable use.

A basic example of CSS ‘normal’ styling:

.navigation {
     width: 940px;
     padding: 10px;
 }

.navigation li {
    list-style: none;
    display: inline;
 }

.navigation li a {
    float: left;
    font: 1.1em / 1em arial, helvetica, sans-serif;
    text-decoration: none;
    color: #4b6371;
 }

.navigation li a:hover {
    color: #000;
 }

And the same styling ‘sassified’:

$arial : Arial, Helvetica, sans-serif;
$corporate-color : #4b6371;

.navigation {
	width: 940px;
	padding: 10px;

	li {
		list-style: none;
		display: inline;

		a {
			float: left;
			font: 1.1em / 1em $arial;
			text-decoration: none;
			color: $corporate-color;

			&:hover {
				color: #000;
			}
		}
	}
}

The ‘sassified’ mark-up is more concise, and it is obvious to those reading it that each of the styled elements nested inside of .navigation belong there. Nesting elements like this result in clean mark-up without any of those repeated .navigations that you see in the original example. Time saver.

On top of this, notice the $variables declared at the top of the snippet. These would usually go at the top of the .scss document for use throughout the stylesheet. This speeds up your styling (what was that specific #hex again?) and makes sure that the colours used are consistent throughout the website.

Brilliant! Where do I start?

Well, the first thing to know is there are a few pre-processors to choose from, but the two main players are SASS and LESS.

Not having used a pre-processor before, I had no bias to one or the other, so went based on a little research through that magical tool Google and came across this article, which gives a great overview of the differences and features each has to offer.

 

I went with SASS; the choice is yours, but I felt that SASS had a little more to offer for the future.

Installation

The main thing to note here is that SASS runs on Ruby, so if you haven’t got the Ruby language installed on your machine, you’ll need to go here (windows users) to get started. Mac users running OS X already have Ruby installed, so you can skip this installation process. You will need to activate the SASS gems though before you can use SASS.

Run yourself through the SASS installation guide which is relatively easy going, and then you’re ready to go! Don’t forget to tell SASS to keep an eye on your files by running the following in the Command Prompt with Ruby.

sass --watch style.scss:style.css

(You’ll need to amend file paths accordingly, of course)

 

Now comes the fun part…No really, it’s fun!

That’s it, it really is that simple! Open your text editor of choice and create a new file called style.scss. This will be your new stylesheet that will be converted to style.css whenever SASS detects a change is made and saved (note the .scss!).

As with all new developments, the process is a learning curve, but I was pleasantly surprised when I started working with SASS at how easy it was to get used to and integrate into my normal processes. Try it out and see what you think!

Start using ‘Sassified’ CSS to make your life easier, your development time shorter and your CSS mark up simpler!

One piece of advice that I would give to anyone starting out with SASS is that comments are your friend. It’s good practice to keep well commented code, and remember that if you’re working with other developers, they may not have used a pre-processor in the past and so the code you create should be commented accordingly to give them a helping hand.