CSS Preprocessors: What? Why?…How?!

Photo by Andrej Lišakov on Unsplash

A lot of entry level developers struggle with CSS, given it’s narrow logical functionality when compared to programming languages like Javascript, Java, Python, Ruby etc. A code newbie might find themselves wanting to hack out a conditional statement or a loop to create some dynamic styling in vanilla CSS, only to come to the rude awakening that this just isn’t possible without a little help from some other tools. That’s where CSS Preprocessors come in to save the day!

What is a CSS Preprocessor?

CSS Preprocessors are tools that extend the functionality of vanilla CSS by adding a wide variety of logical syntax such as you might see in a normal programming language. Preprocessors take code written with this new and versatile syntax, and then compile it into traditional CSS that the browser can work with. The 3 most well-known CSS preprocessors are SASS (or SCSS) LESS and Stylus. For the purposes of this blog I’ll be only be providing examples of code written in SASS.

Why should I bother with a CSS Preprocessor?

There are a lot of reasons why CSS preprocessors are a very important tool for front end and full stack developers, particularly those who are working on a large and complex code base.

1. The DRY Principle

Any decent software engineer should be well aware of the fundamental pillar of coding best practices known as DRY, or Don’t Repeat Yourself. In case your new to the acronym, what it means is that a programmer should always strive to avoid rewriting any bit of code within their application. This is often solved by taking a piece of code that may have been repeated in the app and turning it into a reusable helper function or variable.

CSS Preprocessors allow you to keep your code DRY because they give you access to things like variables, mixins and extends which allow you to replace repeated css rules with something reusable.

2. Complex Logic

Preprocessors give you access to some logical syntax you would find in your favorite programming language of choice, so that you can create dynamic styling that responds to the output of the logic.

This includes loops, If/Else statements, and visual nesting of CSS rules.

Overall, preprocessors allow for CSS styling that is efficient and concise in terms of how it is written and powerful and dynamic in its ability to perform more complex logical operations.

Preprocessors in Action:

Here are the primary features within a CSS Preprocessor:

Variables

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

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

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.

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

Now the element with the id #some-other-div inherits all of the styling of the dinosaur 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 divs 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);
}

That’s pretty much all that’s included within the glory of CSS Preprocessors. Thanks for reading!

Love Code // Love Life