- As powerful as CSS is, there are gonna be times
when you want to be able to do something
that the language just won't let you do.
Let me give you a quick example.
Let's say that you used this color,
which is a burgundy, throughout your entire site,
you know complex style sheets can contain hundreds of rules.
Now, let's say that your client decides to use
this flavor of burgundy instead.
At this point, you better have a good
find and replace option in your CSS editor,
or you're going to be doing a lot of work by hand.
Wouldn't it be easier if you could simply
declare a variable for the color at the top of your styles,
and then reference that variable throughout your code?
To change the color site-wide, you could just simply
change the color of the variable.
Well, that'd be great, but you can't
do that with CSS, at least, not yet.
Well that's where CSS preprocessors come in.
CSS preprocessors are programs created to extend
the functionality of CSS and make it easier
for authors to write their code.
They work by allowing authors to write styles
using the preprocessor's extended syntax.
This code is then processed by JavaScript, or
server-side languages, like PHP and Rails,
and then generates styles for the browser.
Most of the features of a CSS preprocessor
are a little beyond the scope of this title,
as they begin to move CSS away from a strictly
presentational syntax to more of a processing language.
However, I do want to give you a brief overview
of some of the things that preprocessors allow us to do.
You know, we've already mentioned variables,
and most preprocessors add those to the mix.
Others allow you to nest rules,
in much the same way that HTML does,
which can make writing styles a bit faster and a lot easier.
You can also take class selectors
and reuse them in other styles.
This ability to mix in styles, from one rule to
another, is an incredibly powerful way
to write more efficient styles.
Some preprocessors even allow you to pass values
into a class, so that the class covers
the basic styling of an element, while different values
allow you to tweak it in each rule that references it.
In most cases, you can also use operators.
Now these allow us to do things
like have the margin of one element equal
to the margin of another element, plus another number.
Now that way, if the first element changes,
the second element would maintain its spacing.
Some preprocessors also allow you to write
simplified code for new CSS features
and handle things like adding vendor prefixes automatically.
While CSS preprocessors are amazingly
powerful they aren't for everyone.
First, you have to learn how they work,
and the syntax specific to that preprocessor.
In many ways it's like learning a
new language, all over again.
Second, your CSS is abstracted from
you in a way that's not always acceptable.
Before it's deployed, the preprocessor code
is processed and output as a normal CSS file.
The resulting CSS is often much less efficient
than it would be if it was carefully authored by a designer.
Maintenance can be an issue as well.
If working in a team, each team member
must use the same preprocessor, and edits
must be made to the preprocessed code,
and not the resulting CSS file.
This can be hard to track, especially since
the processed CSS is the file uploaded to the live server.
Perhaps the final point about preprocessors
has nothing to do with them at all.
Many of the capabilities that preprocessors add to CSS
are currently being added to various CSS modules.
Eventually we should be able to do the bulk of
what preprocessors help us do without using them at all.
I also want to caution any new designers out there.
Preprocessors and their syntax can be very complex.
If you don't understand CSS, or are just learning it,
I wouldn't recommend a preprocessor until you're a
little more comfortable with the native syntax of CSS.
Of course, as with any tool, you need to decide for yourself
if a preprocessor is right for your projects or not.
Researching and experimenting with them
is perhaps the best way to judge for yourself
how effective they would be in your own workflow.
So, let's take a look.
Of the available CSS preprocessors,
LESS and Sass are by far the most popular.
LESS, which you can find at lesscss.org
uses syntax that is very similar to CSS's existing syntax,
making it very popular with designers,
and easier to learn for those that might
know CSS, but maybe aren't as fluid
with JavaScript or other scripting languages.
Sass, which you can find at sass-lang.com, is probably
the most powerful preprocessor on the market today.
Now this actually has two syntaxes.
You can use the older syntax, which has
more in common with scripting languages,
or the newer more popular Sass SCSS syntax
that is designed to be a bit more like CSS.
After checking out those two, you might
want to spend some time exploring Stylus and PostCSS.
You can find Stylus at stylus-lang.com,
it's very similar to Sass and LESS,
has syntax that is very close to the CSS syntax itself,
and is extremely easy to learn.
PostCSS, which you can find at
github.com/postcss/postcss is interesting
in that it's not actually a CSS preprocessor.
Rather it's a series of JavaScript modules
that are designed to transform and process CSS.
That means that you can mix and match these
modules and even use it to write a
preprocessor from scratch, if you want.
It's a nice way to pick and choose
exactly how you want to write your preprocessed CSS.
However, it is a little bit more
technical than the other approaches.
CSS preprocessors certainly aren't for everyone,
and they usually require a fair amount
of experience to implement effectively.
They are, however, extremely powerful tools
designed to extend CSS and make writing it
more efficient, that alone makes them worth exploring.