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
Take the following snippet of CSS:
Nothing too strenuous, but I don't want to keep writing article again and again. It's tedious!
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.
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.
CSS Preprocessors let you define variables for subsequent use in your stylesheet:
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!
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!
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.
There are a variety of CSS preprocessors, the main contenders being Less, SASS and Stylus...
Honestly though, the discussions get pretty heated! None of that here though, not unless you buy me a pint or three afterwards!
...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...
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!
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.
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.
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.
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.
Spriting is great, but:
Surprise! Compass can help us with this :-)
To create a sprite, you simply put all of your images separately in one folder as follows:
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).
Once we've done this, we can use specific components of the sprite as follows:
Alternatively, we can tell compass to import all of our sprite components for using as CSS classes:
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:
But this is far more specific than necessary and something like this might be specific enough:
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:
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!
Or if I've run out of time, catch me in the bar afterwards!