News

Supercharge your CSS with preprocessors – part 1

Do you want to spend less time writing CSS and more time doing fun stuff? A CSS preprocessor could change your life. In part we introduce you to the preprocessors you need to be familiar with.

sass608

It’s that meeting on Friday. Your team has worked on the site for the last month. This is the final client review. Everyone loves it, until the client leans in and says ‘Fantastic. But I don’t like that font. And my new phone has rounded buttons, not square ones. So could you add those too? Otherwise – good job everyone. Get those changes in for Monday’. If you put your site together with plain old CSS, even making basic changes will take a while.

But you didn’t. You used a CSS preprocessor. Most of the key styling is in a few lines of a single file. Instead of hours of manual search and replace, which will probably break the site because it’s nearly impossible without making any mistakes, you can make a few minor changes that take a few minutes.

You can even make them live in the meeting, and run the changes there and then for approval. Instead of gloom, everyone cheers and officially votes you Most Awesome Person of the Week when you break for a nice early weekend an hour later.
And that’s the power of preprocessors. Manual CSS is like building a skyscraper out of matchsticks. Preprocessed CSS sends your productivity soaring into a cloudless sky, leaving you free to concentrate on all those elements of design that really matter. But what does that mean in practice? Read on to find out exactly what CSS preprocessors can do for you.

WHAT IS A PREPROCESSOR

CSS preprocessors take the CSS code you’ve always wanted to write, and turn it into the CSS code you’ve always had to use. CSS has always been half a solution. It’s better than manual markup, but it’s not a sleek and efficient way to specify styling elements.

A key problem – apart from the crafty syntax – is that CSS has no memory or intelligence. In coder-speak, this makes it WET: Write Everything Twice. So you’ll often have to write the same stylings again in many places. Plus, if you want to change something, you have to find those places again and hand-edit them.
Preprocessors take some ideas from hardcore computer programming and put them back into CSS, making code that’s DRY – Don’t Repeat Yourself. With a preprocessor you can get closer to having every key design element defined in exactly one location.

This has many benefits. You can change an entire site’s styling with a few edits. You can reuse the same code across multiple projects, completely separating styling from content mechanics. And you can write smarter CSS that does basic script-style maths to manage elements, makes the relationship between classes and selected elements much clearer, and generally helps you keep the design templates that are cleaner, simpler, and easier to manage.

But there is a catch: there’s no direct browser support for preprocessed CSS. So you can choose to compile your pre-CSS on your development machine, and upload the standard CSS that’s generated. Or you can set up your server to work with raw pre-CSS files, generating the CSS on the fly. The good news is tool support for pre-CSS is getting better all the time, and some editors now work with pre-CSS code directly.

THE BIG THREE

There are three popular mainstream CSS preprocessors – and they’re all great – but here’s how to tell them apart

SASS
sass-lang.com
Stylistically Awesome Stylesheets is newer than LESS, but has a serious following among professional developers, especially when associated with the Compass framework (compass-style.org).
SASS is written in Ruby, which is preinstalled on OS X, but must be installed on Linux and Windows. SASS works best developer-side, compiling preprocessed CSS to standard CSS you upload to web servers. There are many tools to automate the compilation and upload.
As a language, SASS is a two-in-one. You can write SCSS, which – like LESS – is a strict superset of CSS. Or write pure SASS, which isn’t. Compared to LESS it has some extra smarts, including conditionals/repeats outside of mixins, and more complex selector management. When used with Compass, it adds features like sprite management, simplified grids and typography, easier cross-browser support, and plenty of predefined style options.
It’s also being maintained and developed more consistently than LESS. On the downside, it can compile more slowly, which can be an issue. The extra features also mean there is a learning curve. The tutorials and references on the main SASS site could be a little more generous too. But there’s a strong support community, and many online examples, including some standout sample code on The Sass Way blog (thesassway.com).

LESS
lesscss.org
LESS was originally developed by Alexis Sellier. It has very good foreign language support, so it’s worth considering if English CSS isn’t your main interest.
LESS defined the basic feature list for a preprocessor. It includes variables, allowing you to set a value in one place and use it by reference everywhere; mixins, which are variables that drop all the content of a class into another with a single line; rule nesting, which clarifies inheritance; functions, which can modify variables with arithmetic; and plenty of colour-management features.
LESS includes guarded mixins, which produce different CSS according to tests you specify –but it doesn’t have fully general conditionals. Often used with Bootstrap, LESS is great for grids with optional CSS3 support for animations and gradients.
Client-side, you can run LESS from the command line, or from visual tools. Server-side, you can install a native LESS compiler – a bad idea if you get a lot of hits a day. You’ll get a much better performance from Node.js or Mozilla’s Rhino JavaScript engine.

STYLUS
learnboost.github.io/stylus
Stylus isn’t as popular, but it is certainly worth a look. Transparent mixins are a big win. You can define functions normally, but you don’t need to specify a list of parameters. Stylus can copy any parameter string into the CSS, making functions more powerful. It also has iteration and loops, so you can generate repeated elements with styles under code control.
Stylus extends this with interpolation, which is its own way of allowing what mainstream programming languages called enumeration – the ability to step through a predefined list of strings of values with a few lines of code, and to drop the strings/values into the final CSS. It’s a good way to write efficient code, with the downside that it can be harder to read.
Stylus syntax can be pared to the bone. You don’t need to include colons, semi-colons, or curly brackets. But you do need to include whitespace so Stylus knows when you’ve started a new definition.
Stylus runs under Node.js, so you’ll need that, and then use NPM, the node packet manager, to install Stylus. Try some experiments online on the Stylus site.

TWO ALTERNATIVES

SWITCH
bit.ly/18AbUbB
Switch is a preprocessor in Embryo. Its big feature is out-of-the-box Apache compatibility – it runs as an Apache module under mod_python, which gives Apache support for the Python programming language. The code is freely available at code.google.com/p/switchcss. If you’re minded to explore full-cream code development, Python is a good language to start with. It’s much easier to work with than heavyweight languages like C++ – and it’s not impossibly difficult to customise Switch to create your own mini-preprocessor.

SPIFFING
spiffingcss.com
Do you need a preprocessor that plays stirring patriotic music while draping red, white and blue bunting around an old red British phone box? Probably not. But just in case, take a look at spiffingcss.com. It swaps spellings like ‘color’ and ‘gray’ into sensible English words like ‘colour’ and ‘grey’. It even converts the brashly self-absorbed ‘!important’ keyword into ‘!please.’ Tea and scones not included, unfortunately. But it’s smashing for weather apps

×