Empty input
Last updated 2017-09-06


Learn CSS preprocessors - SASS, LESS and Stylus

CSS preprocessors take code written in the preprocessed language and then convert that code into the same old css we’ve been writing for years. 3 of the more popular css preprocessors are SassLESS, and Stylus

CSS Pre-processors are in our development life for years. In their first implementations, they had few features. But nowadays, they are the key ingredients and must have tools for CSS development. Pre-processors extend CSS with variables, operators, interpolations, functions, mixins and many more other usable assets. SASSLESS and Stylus are the well known ones. By the time this article is published, SASS is at version 3.3.5, LESS is at version 1.7.0 and Stylus is at version 0.43.1

Why Pre-Processing CSS?

CSS is primitive and incomplete. Building a function, reusing a definition or inheritance are hard to achieve. For bigger projects, or complex systems, maintenance is a very big problem. On the other hand, web is evolving, new specs are being introduced to HTML as well as CSS. Browsers apply these specs while they are in proposal state with their special vendor prefixes. In some cases (as in background gradient), coding with vendor specific properties become a burden. You have to add all different vendor versions for a single result.

In order to write better CSS, there were different approaches such as separating definitions into smaller files and importing them in to one main file. This approach helped to deal with components but, did not solved code repetitions and maintainability problems. Another approach was early implementations of object oriented CSS. In this case, applying two or more class definition to an element. Each class adds one type of style to the element. Having multiple classes increased re-usability but decreased the maintainability.

Pre-processors, with their advanced features, helped to achieve writing reusable, maintainable and extensible codes in CSS. By using a pre-processor, you can easily increase your productivity, and decrease the amount of code you are writing in a project.

Learn more on https://htmlmag.com/article/an-introduction-to-css-preprocessors-sass-less-stylus