Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome, Safari or Firefox browser.

CSS Preprocessors
Why, How, and "Wow!"

Andy Mantell - Freelance Web Developer

Twitter: @andymantell

http://www.andymantell.com

Why?

CSS ain't broke! Is it?

Well, no...

CSS isn't broken as such, it can just be a bit of a pain sometimes.

My favourite thing about code is writing as little of it as possible

Repetition...

Take the following snippet of CSS:

Nothing too strenuous, but I don't want to keep writing article again and again. It's tedious!

Nesting with a CSS Preprocessor

What if, instead of repeating ourselves, we could do this:

Nesting is a common pattern within CSS preprocessors and is often the first feature that people use.

Your preprocessor of choice (more on this later), will take this and compile it down to CSS for you.

Repeating values

Quite often in CSS we may want to use the same value again and again for something. E.g. colours, widths:

In this trivial example, we've repeated that #424242 colour value twice but it doesn't have to be this way.

Variables with a CSS Preprocessor

CSS Preprocessors let you define variables for subsequent use in your stylesheet:

Vendor prefixes

Anyone who writes CSS for a living will be familiar with CSS full of vendor prefixes like the following:

The internet is full of handy tools to generate this code (E.g. http://www.colorzilla.com/gradient-editor). They're pretty useful...

The code that comes out is properly ugly however. I don't want to read that gibberish!

"Mixins" with a CSS Preprocessor

CSS Preprocessors can help us out here too, with a construct known as a "Mixin":

N.B: The above example is SASS and uses a mixin built into the Compass framework.

In this example the CSS preprocessor has let us write a nice clear statement instead of 7 lines of repetitive nonsense.

I for one would much rather maintain this second example! Need to update a colour? Do it once, not 7 times!

Declaring your own mixins

Mixins can either be defined yourself or there are a variety of libraries on the internet with common ones predefined (E.g. Mixins for all CSS3 properties).

N.B. Example is SASS. Syntax varies between languages, but the core concept remains the same.

I'm a button!

Getting a bit more fancy!

CancelI'm a button!

How?

Ok great, but how do I use one of these preprocessors?

Less, SASS & others

There are a variety of CSS preprocessors, the main contenders being Less, SASS and Stylus...

Fight!

Honestly though, the discussions get pretty heated! None of that here though, not unless you buy me a pint or three afterwards!

Compiling Less / SASS / Stylus

...and a variety of ways to compile them, either using a GUI or the command line.

There are many more than I have listed here...

Wow!

Some more possibilities that a Preprocessor can open up...

Disclaimer

It's gonna be SASS from here on in as that is my personal preference! However, I would definitely recommend trying a couple out and not reading the flame wars until you have done so!

SASS + Compass

When talking about SASS, Compass will often be mentioned in tandem. But what is it?

SASS is the actual preprocessor, defining the underlying language.

Compass is a (optional) framework built on top of SASS.

What can Compass do?

It provides common mixins for all CSS3 properties. People have written similar mixin libraries for Less etc.

The extra bit that Compass affords you however, are the additional utilities to help you with common layout tasks and more complex things like spriting.

Spriting

If you're a frontend developer, you will probably be familiar with the technique, but if not, spriting is a way of combining many small images into one large image for use in your CSS. This is done for performance reasons, allowing many images to be downloaded in one http request.

A sprite from google.com

Spriting

To access part of this sprite, you then set this image as the background image of your element, and move it to the correct position along the X and Y coordinates.

A sprite from google.com

Pitfalls of spriting

Spriting is great, but:

Spriting with Compass

Surprise! Compass can help us with this :-)

To create a sprite, you simply put all of your images separately in one folder as follows:

Sprite folder

Spriting with Compass

Then use the following code to initialise the sprite:

And Compass will then generate the following image (This is "real" - this sprite is generated by Compass).

Spriting with Compass

Once we've done this, we can use specific components of the sprite as follows:

Spriting with Compass

Alternatively, we can tell compass to import all of our sprite components for using as CSS classes:

CSS:

HTML:



Reasons why not to use a preprocessor?

Nest all the things!

It is remarkably easy to get overexcited about nesting when first using a preprocessor and create bloated un-optimized CSS if you aren't thinking about what is going to come out the other end.

Would compile down to:

Nest all the things!

But this is far more specific than necessary and something like this might be specific enough:

Resulting in:

The repetition is back!

The repetition is back!

Results in:

Combatting repetition with @extend

The following:

Combatting repetition with @extend

Results in:

Working with other developers that don't use preprocessors

Slight issues surrounding working with other developers that don't use a preprocessor. If one developer uses a preprocessor, the other has to.

On the flip side, "normal" CSS is generally valid Less / SASS, so you can use as little or as much as you like. E.g. the following is perfectly valid for a preprocessor:

Summary

Whether you are new to them, love them or hate them, hopefully I've given an overview of what's possible with a preprocessor.

I honestly feel that they're worth spending a bit of time integrating them into your process and see if they can help you.

This presentation has really only scratched the surface!


Any questions?

Or if I've run out of time, catch me in the bar afterwards!