CSS Preprocessor
2 min readDec 12, 2020
A CSS preprocessor is a program that lets you generate CSS from the preprocessor’s own unique syntax. There are many CSS preprocessors to choose from, however, most CSS preprocessors will add some features that don’t exist in pure CSS, such as mixin, nesting selector, inheritance selector, and so on. These features make the CSS structure more readable and easier to maintain.
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
.lessfiles 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.
