CSS Preprocessor

Some Popular CSS Preprocessors:

  • SASS/SCSS: It is the oldest CSS preprocessor and an extension of CSS. Sass stands for Syntactically awesome style sheets. It also helps to keep things organized and allows you to create style sheets faster. It is completely compatible with all versions of CSS. Sass is written in Ruby, and originally it also needed Ruby to compile the code, which deterred many developers from using it.
  • LESS: LESS stands for Leaner Style Sheets, it was influenced by Sass, therefore it implements many of its features such as mixins, variables, and nesting. Interestingly, later LESS also influenced Sass, as the newer SCSS syntax was inspired by the syntax of LESS. As it’s written in JavaScript, we need Node.js to install and run the LESS compiler. However, we can also compile LESS on the fly by adding .less files and the LESS converter to the <head> section of our HTML page.
  • Stylus: Stylus is written in Node.js so that developers can easily integrate it into their Node projects. It was influenced by both Sass and LESS. Stylus combines the powerful logical abilities of Sass with the easy and straightforward setup of LESS.
  • PostCSS: It is not actually a CSS preprocessor. It can be used as a preprocessor, a postprocessor — actually, a processor of all kinds which can also help you optimize, clean your code, and perform all sorts of other tasks. PostCSS is, in its essence, an API with a ton of empowering JavaScript plugins available.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Abhay Jain

Abhay Jain

Developer with 3 yrs of industrial experience in developing scalable web applications.