CSS is dumb. It’s not a thesis, there is no need to prove it. CSS is dumb and it’s a fact. It was never meant to be neither elegant nor complex. It is supposed to be simple enough so that anyone who spares just a moment can understand it. There are only a few syntax rules that you need to follow and a library of properties to remember and you’re ready to go, no wizardry here. The problem is that CSS is very “flat”. When creating more complex rules for elements deep in your HTML structure, you will find yourself writing those long selectors or creating an unnecessarily large number of classes. Maintaining such a code can be a handful and will most probably lead you to tearing your hair out at some point. Thankfully, there are tools that will save you from getting completely bald: CSS preprocessors. They’ve been around for quite some time now, but for all you guys who are still writing raw CSS, here is some info that might change your life a lot.

What’s processor, Precious?

PRE-PRO-CESS-OR is a program that converts one code to another. What we’re interested in is whatever converts to CSS, and there is a bunch of those. The most popular one would be Sass, powered by Ruby language, or its newer version Scss. There is also Stylus, LESS.js, CSS-crush and many more. For the sake of keeping it simple, let’s see how we can make writing CSS fun again with just one of those.

SCSS vs. CSS, fight!

Scss gives you more. Well duh, of course it does, that’s why it has been created! But how exactly does it make your life easier? What does Scss have that CSS doesn’t, and that is worth spending time learning?

Variables

Variables are properties in which you hold certain values for later use. Let’s say you have a main color defined in your project, #445A86. Instead of using that hex value, you can simply put it into a variable, let’s say mainColor, and use it wherever you want your mainColor to apply. The value you get from it is that if you want to change the primary color in your theme, you just need to change the value in your variable and you’re done. In Scss, variables are prefixed with a $ sign, ex. $mainColor.

Example Scss:

Compiled CSS:

The important thing to note here is that Sass variables have scopes. It means that a variable will be known to its scope, and can be overwritten by a variable of the same name within a smaller scope.

Example Scss:

Compiled CSS:

Mathematical expressions

So far Scss supports these mathematical operators: addition (+), subtraction (-), division (/), multiplication (*), modulo (%), as well as equality operators (==, !=) and relational operators ( <, >, <=, >= ).

Example Scss:

Compiled CSS:

Nesting

The example above brings us to another thing Scss has to offer: nesting. It allows you to nest declarations for the sake of the Don’t Repeat Yourself principle. Look at this block of Scss code from the previous example:

Now, how cool would it be to get rid of all those .coolBox class repetitions? Not a problem, Scss to the rescue!

Example Scss:

Compiled CSS:

Note the & sign before the nested class declarations. That sign (ampersand) concats whatever is following it to the parent selector. Without it, the result of the compiled CSS would look like this:

What else can we achieve with nesting and ampersand sign? Well, let’s take a look at these examples:

Example Scss:

Compiled CSS:

One thing to note here is that the ampersand can be used only at the beginning of the selector part of the declaration. Nesting can be pretty useful, but beware – it can generate a lot of problems that may bring some confusion. If you go too far with nesting your CSS declarations, it will become hard to trace back what the purpose of your code is. It’s never good when the code you write becomes somewhat tribal knowledge; it’s supposed to be readable for others who may work with it.

Functions

These bad boys are crème de la crème feature of Scss. There is a multitude of cool functions built into Scss, let’s look at a simple example, a lighten() function:

Example Scss:

Compiled CSS:

lighten() takes in 2 parameters: color and value. What does it do? Here’s a shocker: it lightens the color by value. Now, instead of declaring a variable for every color, you can manipulate values that are already created. Here you can find a full list of Scss functions.

Mixins

Mixin is one of the directives built into Scss. It allows you to prepare a reusable block of CSS rules. What’s even cooler is that mixins can consume arguments passed into them. Let’s say you will use a lot of rounded borders around in your design, let’s create a mixin that will help us out with that task. For that, we’ll need two things: a mixin declared with @mixin directive and a way to use it in your code. The latter is achieved with @include directive. Let’s take a look at the following code:

The above code doesn’t do much by itself. We’ve declared a mixin called custom-border that consumes one argument, called radius (used as a local variable in the mixin). What’s left now, is to use the created mixin somewhere in our code:

Example Scss:

We have an element with .box class and three additional classes that control what kind of border we want: small, medium or large having respectively 2px, 5px, and 10px border-radius property.

Compiled CSS:

It’s not only much less code to write, but also fewer places that need to be modified to change how the element is viewed.

What you read here is just a fraction of what Scss has to offer. There are @rules, directives, expressions, interpolation and even extending Scss by writing your very own custom functions. To learn all of those, you most definitely need to invest quite a lot of time, but the return of investment, the final value you get out of that, is well worth your while.

Whether you use LESS, Scss or anything else is completely up to you. Scss is the most advanced preprocessor out there, but in the end, you use what you’re most comfortable with. What’s important is to understand how proper use of CSS preprocessors can help you and your team make your code much easier to maintain.

Articles by Maciej Śmiechowski

Be a Dear and Preprocess Your CSS