Tools Web Development

Preprocessors Compared to Cars [or 7 Reasons to Use a Preprocessor]

4.94/5 (18)

Are you fond of riding a horse? I am! To tell the truth, I tried it just once, but I definitely enjoyed it. This awesome feeling of graceful connection with a horse, a sense of trust, freedom, strength and total harmony - is something that’s hard to explain, but you know you feel so comfortable with it, that nobody in the whole universe could talk you out of experiencing it again and again. By the way, my Team Lead also likes horse riding! (you can make fun of the hat he's wearing in the comments section 🙂 )

horse riding
But what would you say if you had to use a horse as a means of transport? In your everyday life. Just to get to work, for example. A hundred miles away from your home. Of course, if you are a historical character from the Iron Age, you’d be overjoyed with it. And what about today? Would you still prefer it to other means of transport? Is there any reason to shy away from the innovations, if they make your life easier?

I hope you’ve got the idea 🙂 . And yes, I’m hinting at using preprocessors instead of vanilla CSS.


In TemplateMonster website templates, the use of preprocessors is all in a day's work - Jade as a preprocessor for HTML, and SCSS as a preprocessor for CSS. In this tutorial, we shall discuss some of the CSS preprocessors and how to deal with them if you’re just a beginner in web development.

The process of developing a web project nowadays becomes more complicated, as the styles, particularly the stylesheets, are getting larger and more complex. That is why in 2007 smart people invented a way to accelerate your development by using the first version of a handful of solutions called preprocessors.

using sass
A preprocessor is a language on top of CSS that adds more functionality and gets compiled into CSS. It means that the code is written in a scripting language which is then transformed into the regular CSS.

As we know from Wikipedia, in computer science, a preprocessor is a program that processes its input data to produce output that is used as input to another program. The output is said to be a preprocessed form of the input data, which is often used by some subsequent programs like compilers (Source: Preprocessor).

There’s a bunch of different preprocessors and post processors existing nowadays. Sass/SCSS, Stylus, Less, PostCSS, Cssnext, Rework, Stylecow, Sly, Pleeease, CSS-Crush, CSS-On-Diet, Myth - are just some of them. The first three preprocessors are still widely used, though postprocessors are getting more and more popularity as a functional addition to the preprocessors.


sassSass, which stands for Syntactically Awesome Style Sheets, was the first CSS preprocessor and is still a leader now, while gets a 63% of usage. Initially, it was designed by Hampton Catlin and developed by Natalie Weizenbaum in 2007, as already mentioned. It runs on Ruby and is processed server-side. Sass has two syntaxes: the first one is the original Sass syntax, which omits brackets and semicolons, while nesting is indicated by the indents; the second is SCSS (Sassy CSS) - more similar to CSS, but still having Sass features.

less
A little later, influenced by Sass, appeared Less (some say it stands for LEaner CSS). It was designed by Alexis Sellier in 2009 and intended to be as close to CSS as possible. Compared to Sass, LESS is a JavaScript library and runs client-side. This is one of the reasons it can be compiled slower. The syntax is slightly different from SCSS; for instance, in variables the sign @ is used instead of $. But the difference is not as critical. So if you get the idea of one preprocessor, you’ll get used to another one quite easily.

stylus
Stylus, in its turn, was influenced by both Sass and Less and created by TJ Holowaychuk in 2011. Its syntax is more versatile - you can use brackets and colons/semicolons, or you can omit them. Moreover, you’re able to write your code with and without these symbols - and it will still be valid and properly compiled. Defining variables also does not require some additional signs before their name, though using $ sign is allowed.


Why it's Better Than a Horse?

Let’s dive a little deeper into the subject and review the advantages of these preprocessors, using code excerpts from the Eveprest - Multipurpose PrestaShop Theme as examples.

  1. Variables
    Variable is a mechanism for referring a value. Imagine that we have to change the same color of many elements. This is a brilliant example which is used everywhere to describe the benefits of using variables. We’ll use it too. By the way, in TemplateMonster templates, we use them throughout. There’s even a separate file called ‘_variables.scss’ where all the general variables are stored. Why is there an underscore at the beginning of the file name? I’ll mention it further, talking about partials. And now let’s see how we define a variable and use it throughout the project.
    For example, this SCSS code:

    $font-family: 'Open Sans', sans-serif;
    $font: normal 16px/26px $font-family;
    $color-base: #767676;
    
    body {
      min-width: 320px;
      height: 100%;
      font: $font;
      color: $color-base;
    }
    
    Will be compiled to CSS the following way:

    body {
      min-width: 320px;
      height: 100%;
      font: normal 16px/26px "Open Sans", sans-serif;
      color: #767676;
    }
    
  2. Nesting.
    You can nest selectors in each of the preprocessors, but don’t forget that when using Sass (not in SCSS) nesting is implemented in the form of indents. In SCSS, Less and Stylus you just place the child selector inside the parent’s brackets. It works the following way:
    SCSS

    $base-body-color: #5c5d65;
    $link-color: $base-body-color;
    $link-hover-color: #01a5d5;
    
    .content_scene {
      color: $base-body-color;
      .cat_desc {
        padding-top: 20px;
        a {
          color: $link-color;
          &:hover {
            color: $link-hover-color;
          }
        }
      }
    }
    
    CSS

    .content_scene {
      color: #5c5d65;
    }
    .content_scene .cat_desc {
      padding-top: 20px;
    }
    .content_scene .cat_desc a {
      color: #5c5d65;
    }
    .content_scene .cat_desc a:hover {
      color: #01a5d5;
    }
    
    One more example of nesting:
    SCSS

    header {
      position: relative;
      .banner {
        max-height: 100%;
        .row {
          margin: 0;
        }
      }
      .row {
        position: relative;
        > .container {
          position: relative;
        }
      }
    }
    
    CSS

    header {
      position: relative;
    }
    header .banner {
      max-height: 100%;
    }
    header .banner .row {
      margin: 0;
    }
    header .row {
      position: relative;
    }
    header .row > .container {
      position: relative;
    }
    
  3. Mixins.
    Probably the most important feature of preprocessors. Mixin (from mix-in) is a set of properties and selectors describing the behavior of another selector. It’s almost the same as a function. You can use it multiple times in the project calling it whenever needed. Let’s see how it works:
    SCSS

    @mixin addMaterialIcon($content, $font-size: inherit) {
      font-family: 'Material Icons';
      content: $content;
      display: inline-block;
      font-weight: normal;
      font-size: $font-size;
    }
    
    .quick-view {
      display: inline-block;
      line-height: 1;
      &:before {
        @include addMaterialIcon('\e8ff', 25px);
      }
    }
    
    CSS

    .quick-view {
      display: inline-block;
      line-height: 1;
    }
    .quick-view:before {
      font-family: 'Material Icons';
      content: '\e8ff';
      display: inline-block;
      font-weight: normal;
      font-size: 25px;
    }
    
  4. Calculations and functions.
    Sometimes you need to use your previously created variables, but with some modifications. For example, the margin which should be larger than the standard one, defined by the variable. Or the color which is used for the background should be lighter than the font color. Then you’re just fated to use Sass functions.Sass supports standard math operations (you can use +, -, *, /, and % operators) as well as many functions, for example, applied to colors (‘lighten’ and ‘darken’ are probably the most popular among them). You can find a full list of operations you can find here - Sass Functions. And this is how they are used in our templates:
    SCSS

    .three-elements {
      width: (100%/3);
    }
    
    $theme-color: #ea917d;
    .cart-btn {
      background: lighten($theme-color, 5%);
    }
    
    CSS

    .three-elements {
      width: 33.33333333%;
    }
    
    .cart-btn {
      background: #eea493;
    }
    
  5. Partials.
    When the project is quite large, and there are lots of elements, therefore styles,  it’s not that convenient to navigate through them within one file. That is the reason why partials are used. A large ‘style.scss’ file can be split into much smaller ones. These partials file names should start with ‘_’ in order not to be compiled into the corresponding .css files.They are imported into the main styles file the following way:

    @import "_theme_variables";
    @import "_elements_variables";
    
  6. Extending
    A set of properties defined to some selector can be inherited by another selector, and modified as well. You just need to use ‘@extend’ and the class which is going to be inherited. Then add or rewrite some properties. And voila:
    SCSS

    .product-name {
      font: normal 16px/26px 'Open Sans', sans-serif;
      color: #ea917d;
      margin-bottom: 0;
    }
    
    .product-counter {
      a {
        @extend .product-name;
        font-weight: 700;
      }
    }
    
    CSS

    .product-name, .product-counter a {
      font: normal 16px/26px 'Open Sans', sans-serif;
      color: #ea917d;
      margin-bottom: 0;
    }
    
    .product-counter a {
      font-weight: 700;
    }
    
  7. Complex browser support (autoprefixer).
    One of the most important and time-saving features of preprocessors is auto-prefixing. Enabling this option, you need no longer type the vendor prefixes time and time again.They will be added automatically, just as in this example:
    SCSS

    #slider_container .pagers {
      position: absolute;
      left: 30px;
      top: 50%;
      border-radius: 15px;
      transform: translate(0, -50%);
      box-shadow: 0 0 0 10px #d2d1d1;
    }
    
    CSS

    #slider_container .pagers {
      position: absolute;
      left: 30px;
      top: 50%;
      border-radius: 15px;
      -webkit-transform: translate(0, -50%);
              transform: translate(0, -50%);
      box-shadow: 0 0 0 10px #d2d1d1;
    }
    
The most captivating advantage of preprocessors is the fact, that you are not required to learn! The syntax is so simple, that you will probably need just a few hours just to get used to it.

If you are not familiar with command line, that’s not a problem either. There are lots of applications to compile .scss/.less/.styl files to CSS. CodeKit, Koala, Prepros, LiveReload - are the most popular choices.


The Comparison

So why use a horse if you can ride a car?

Preprocessors can be compared to cars, really. They speed up the process and make your life easier, though you need some time to get used to them. New versions are constantly being developed, improving the previous ones. You can choose which one is the most suitable for you, and change it to another if you have a particular reason.

I’ve tried to create the analogy between preprocessors and cars and attempted to visualize how each of these programs would look if it were a vehicle. But that was not simple. To tell the truth, the process of searching out the analogy was really tough. There was a problem finding a parallel between preprocessors’ and cars’ features or characteristics. But then it became obvious. The three most popular preprocessors can be compared to the three most popular automobiles in the world!

And suddenly the similarities began to show up, so let me elaborate on the idea:

  1. Sass is the leader of the three, that’s why it can be compared to a Toyota Corolla as the most popular car in the world nowadays. It’s the most simple, reliable, and efficient vehicle compared with its competitors. It’s truly one of the easiest cars to drive in its segment. And what’s amazing - all of its features can be applied to Sass.
    sass preprocessor
  2. Less is very similar to the Volkswagen Golf. The iconic hatchback belongs to the same price category as Corolla, and they both have much in common, like Sass and Less. Nevertheless, Volkswagen hasn’t yet achieved such a predictable user experience as Toyota, but they are still very close. Less needs the lower timing for processing. Just like the Golf performs faster than the Corolla. To be fair, Golf’s top speed can be compared with the faster performance of Less. Moreover, they were both were created by Germans!
    less preprocessor
  3. Stylus can be compared with the Ford F-series where its robust nature always shines through. It differs from other preprocessors with its syntax, just like the F-series design totally differs from the Corolla and Golf. Moreover, Ford F-series is becoming more popular and has recently become the second most popular vehicle replacing the Golf, just like the Stylus preprocessor, is tending to overtake Less.
    stylus preprocessor

As we see, there are definitely some real comparisons between preprocessors and cars -  and riding in a car is undoubtedly more rational and efficient than riding on a horse. Sure, if you want to experience it sometimes just for pleasure, it’s up to you. But if you want to be productive, you’re earnestly recommended to choose one of these vehicles. Decide which one is better suited to your needs and…bon voyage!

I’m hoping you won’t remain indifferent after reading this article. Even more - I’m very curious to know your opinion concerning this topic. So here are some questions for you!

Don’t hesitate to submit your answers in the comments below.

  1. Do you use a CSS preprocessor/postprocessor?
  2. Which preprocessor/postprocessor do you use?
  3. In your opinion, what is the future of preprocessors?

Related posts

20 Sass and Compass Tools That Every Developer Must Know About

The Go-Getter’s Guide to Self-Development: Spice Up Yourself! [May Online Courses Edition]

CSS3 Cheat Sheet for Dummies Learning to Code

How to Get Out of the Coding Trap with CSS Viewers: Must-Read for Slowpokes

CSS Grid: The New Way of Building Web Layouts

Creating a Back to Top Button with CSS & jQuery