3 Simple Reasons to Use a CSS Preprocessor

If you haven’t used a precompiler before, you are about to fall in love. When you first learn CSS, you learn it stands for Cascading Style Sheets, which is pretty accurate. Whatever property you change twice, it will be overridden by the latest line. Because of this, CSS involves a lot of repetition and specification. Either via classes, IDs or selectors you have to show the browser exactly what you want to style. But what if I told you this could be easier? You could write a very specific CSS file without repeating so much. When I learned about this, I thought I was dreaming. When I learned how to do it, I promised myself I would never go back to simple CSS if I could help it.

When it comes to precompilers, there’s a couple of options. I’m talking about the one I have used before, SASS. SASS stands for syntactically awesome style sheets. In the next few paragraphs, I will show you why I will never go back to simple CSS.

Reason Number 1: Variables

If you are a developer you must have wished to be able to create variables in CSS before. This feature alone is enough for me to use a precompiler. Some people say "well you could place your styles in a class and use that class for all the tags you want to look that way". Yes, but what about all the time you spent doing the hundreds of lines of CSS, trying to use one class in many places?

There are frameworks made exactly for that. We want to be able to call a property and not have to remember what it was exactly every time we use it. So when I'm using SASS and I know I want to have a specific color palette, I make a couple of variables at the top of my document. I don't even call the colors what they are, I call them main, secondary and background:

$color-main-light: #6f6df0;
$color-main: #424dec;
$color-main-dark: #202174;
$color-secondary-light: #434957;
$color-secondary: #272a31;
$color-secondary-dark: #181a1f;
$color-background: #dadcde;
$color-background-dark: #3b3a4b;

$font-paragraph-size: 11px;
$font-title-size: 24px;

So if the client wants a color scheme change, I need to change these lines. Oh, and how do you call this on a class or selector? Easy:

body {
  background-color: $color-background;
  color: $color-main-dark;
}

So we can give the body background color and its text will be a dark blue, and if we need to change this specifically for paragraphs and other selectors, you will use my second favorite feature:

Reason Number 2: Nesting

In the last example, you could see how you can use variables to modify your entire page's properties by just changing one line in the document. That is already great. However, in CSS, you need to be careful. You need to be specific about which element you will style, or you may end up changing something you don't want. We don't want this to happen, so how about we nest selectors inside other selectors?

Let's say we want all the heading tags to be the main color, and to use the same size, and all the paragraphs to use the secondary color and be smaller. We already have a variable for that, so let's make use of that, but let's be precise and make it only happen on the tags we want.

body {
  h1 {
    font-size: $font-title-size;
    color: $color-main-dark;
  }
  p {
    font-size: $font-paragraph-size;
    color: $color-secondary-dark;
  }
}

With this, all the body of your website will get these properties. You could customize specific parts using classes or IDs in other parts of your site. Now you may be asking, why do this when you can do the same on CSS? The answer is simple. It's easier to read for us simple humans.

Reason Number 3: Mixins

By now, you may be wondering, what is a mixin? Let me explain. Let's say there's a piece of CSS you will use several times. You could copy-paste it all over the place because it's a generic and useful piece of style. But what happens if you want to change it? In all your website no less. Here's where mixins come in handy.

They are the precompiler copying and pasting for you. Again, let's pretend we want to do a flexbox. We want it to be in a column direction and to justify it to the center. At the same time, we want it to occupy the whole width of the container. That's already four lines of CSS, and if we are going to do that a lot, it may be faster to just do a line every time, wouldn't it? Let's take a look at how a mixin would work:

@mixin w-flexbox($set-width) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: $set-width;
}

.flex-container {
  @include w-flexbox(100%);
}

The best part of mixins is that you can use parameters. Let's say we don't want the box to occupy 100% of the container's width, we can call the mixin differently:

.flex-container {
  @include w-flexbox(80%);
}

And this way, it will only occupy 80% of the container's space.

Conclusion

Of course, SASS does have more features, it would take me loads of time to explain them thoroughly. Besides, more people have done other resources that explain this. They are very easy to follow and better written than I could ever do. I just wanted to show you why switching to SASS is worth the hassle of the installation and learning. I hope your style sheets are now easier and faster to make. I will now leave some links for you to read further:

• Basic guide for SASS
• SASS cheat sheet by devhints.io