The Benefits of a CSS Preprocessor Over A Conventional CSS

We can't overemphasize the importance of CSS (cascading style sheet) when it comes to adding styles, design, layout, and everything you need to create a stunning website. But when it comes to complex projects anybody that has been coding for a while can agree with me that CSS code can be very long, messy, and sometimes hard to understand.

Congrats if you have these thoughts, your time to pick a preprocessor has come, We have several of them but I will be talking about SASS.

What is SASS?

SASS (Syntactically Awesome Stylesheets) is a CSS pre-processor that lets you use variables, mathematical operations, mixins, loops, functions, imports, and other interesting functionalities that make writing CSS much more powerful.

Once you start working with Sass, it will take your preprocessed Sass file and save it as a normal CSS file that you can use on your website. It does this by compiling your Saas file by using a simple

saas

command, You will also tell Saas which file to build from and this happens in the terminal.

For example

sass input.scss output.css

from your terminal would take a single Sass file,

input.scss

, and compile that file to

output.css

Here are six benefits of using Sass:

1. CSS syntax

If you know CSS you already know SASS. SASS comes with two different syntaxes: SASS itself and SCSS, the most used one. SCSS syntax is CSS compatible, so you just have to rename your .css file to .scss. Your first SCSS file has been created, just like that. You don't need to spend hours learning Saas, you can easily pick up the syntax as you go.

2. Variables

This is easily one of the best features of Sass. I have found myself severally in a scenario where I was actually looking for a hex color code I used earlier for a style in my code and this can get frustrating at the time. But with Sass variables, you can store things like colors, font stacks, or any CSS value you think you’ll want to reuse. Sass uses the $ symbol to make something a variable. Here's an example:

// variables
$font-family:    Helvetica, sans-serif;
$primary-color: #fff;

body {
  font-family: $font-family;
  color: $primary-color;
}
//compiles to 
body {
   font-family: Helvetica, sans-serif;
   color: #fff;
}

3. Nesting

When writing HTML it has some sort of visual hierarchy but CSS doesn't. Sass will let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML.

Here is an example of a bootstrap card component:

// nesting
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}
//compiles to
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

4. Extends

This is one of the interesting features of Sass. Using @extend lets you share a set of CSS properties from one selector to another. Here’s an example in action:

.button {
 display: block;
 border-radius: 3px;
 padding: 16px;
}

.button-green {
 @extend .button;
} 
// compiles to
.button,
.button-green {
 display: block;
 border-radius: 3px;
 padding: 16px;
}

5. Partials

As the complexity of your projects grows the line of CSS written becomes larger to maintain and understand.

Luckily, SASS has the @import rule. @import allows you to modularize your code making it easier to maintain by importing smaller SASS files. I know some people will say CSS also has an @import rule but the difference between Sass @import rule and the CSS @import rule is that all imported SCSS files will be merged together into a single CSS file, so in the end, only a single HTTP call will be requested because you will be serving a unique CSS file to the webserver.

6.Maths!

Doing math in your CSS is very helpful. you can use addition (+), subtraction (-), multiplication (*) and division (/).

In the example below, we are aligning two elements aside & article. on a 1000px screen:

.container {
  width: 100%;
}

article {
  float: left;
  width: 600px / 1000px * 100%;
}

aside {
  float: right;
  width: 300px / 1000px * 100%;
}
//compiles to
.container {
  width: 100%;
}

article {
  float: left;
  width: 60%;
}

aside {
  float: right;
  width: 30%;
}

Final Thoughts

I understand if you think I didn’t add much cool stuff that Sass can actually do. The goal was to convince you to give one of these amazing tools a shot if you haven’t already.

Follow me on Twitter | Github.