This article is a task from Chris Bongers on Hashnode Technical Writing Bootcamp II.

A preprocessor has its own syntax for developers to write easier and cleaner CSS code. Later, it gets translated in a separate file to standard CSS, because browsers don’t understand the syntax. There are different preprocessors like Sass, Scss, Less, and Stylus.

What is Sass?

Sass is one of the most widely used CSS Preprocessors. It has various features to help developers write better and cleaner CSS code.

Sass (short for Syntactically Awesome Stylesheets) plugs the holes in CSS as a language, allowing you to write DRY code that’ll be faster, more efficient, and easier to maintain. It allows you to use features not generally built in into css like Sass allows us to use variables, nested rules, use mixins, import to CSS and much more.

What's wrong in using CSS?

CSS stops short of even more powerful features that programmers use in their programming languages: macros, variables, symbolic constants, conditionals, expressions over variables, etc. That is because these things give power-users a lot of rope, but less experienced users will unwittingly hang themselves; or, more likely, be so scared that they won’t even touch CSS.

The original architects of CSS were concerned with adoption. They (rightfully) wanted as many people as possible creating websites. They wanted CSS to be powerful enough to style web pages and separate content from presentation, while being easy to understand and use.

In a nutshell, there's nothing wrong in using CSS, but if you have more better alternatives like preprocessors available, then why not use them and leverage their power.

Css Preprocessors features

Variables

Variables can be created to reuse data multiple times within your stylesheet.

$primary-color: #AAF700;
div {
     background-color: $primary-color;
}

Nesting

Many programmers probably find it frustrating that you can’t create a nested visual hierarchy of CSS elements that inherit from one another. Preprocessors give you this functionality.

$font-size: 24px;
ol {
    margin: 10px 0;
    li {
        padding: 5px 5px;
    }
}

Here all list items that are inside of an ordered list will receive the given padding.

Mixins

Mixins allow you to take a prewritten set of CSS rules and plug it in inside of any CSS element’s styling. This is excellent for cutting down on repeated code.

@mixin hugediv($height) {
     height: $height;
     &:hover {
         background-color: #F5F5F5;
     }
}
#my-favorite-div {
     @include hugediv(900px);
}

Here we have a mixin that allows us to pass in an argument that will then be used as the height of the object within the reusable CSS rule.

Extends

Extends let you share the entire list of CSS rules of one element with any other element of your choice. Hence the name “Extends” because elements can extend their full styling to other elements.

.hero-div { 
       background-image: url('https://hero.com/main.jpg');
       background-repeat: no-repeat;
       background-size: cover;
}
#some-other-div {
       @extend .hero-div;
}

Now the element with the id #some-other-div inherits all of the styling of the hero div!

If/Else Statements

Preprocessors give your styling the ability to dynamically alter itself depending on certain conditionals.

$my-variable: true;
@if $my-variable == true {
        $color-one: blue;
} @else {
        $color-one: red;
}

If the variable $my-variable is set to true, another SASS variable called $color-one will be set to blue, otherwise it will be set to red.

Color Functions

Preprocessors support a wide variety of built in functions for altering a color dynamically.

saturate($color, $amount)
desaturate($color, $amount)
lighten($color, $amount)
darken($color, $amount)
adjust-hue($color, $amount)
opacify($color, $amount) 
transparentize($color, $amount)
mix($color1, $color2, [$amount])
grayscale($color)
complement($color)

Loops

Iteration becomes possible within a preprocessor by using loop syntax.

@for $i from 1 through 100 {
        .content-div#{$i} {
            background-color: darken(blue, 0% + $i);
        }
}

This loop would give div's with class name .content-div1 through .content-div100 gradually lighter blue background colors.

Imports

You can easily combine multiple stylesheets into one without rewriting any code by importing them.

@import "mixins/mixin.scss";
@import "card.css";

Math

Preprocessors allow for arithmetic to be written anywhere within a CSS rule without the need for the calc() function used in vanilla CSS.

my-div {
        width: (100vw / 3);
}

Why use a CSS Preprocessor instead of Vanilla CSS