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.

--

--

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Ibis Styles Roma Eur

Angular: Passing Data Between Unrelated Components

Mr Frontend weekly link sharing #50

Full-stack workflow

Redux: Injecting reducers dynamically

React-Redux

My Graph data strucuJavaScript code

React -Redux workflow understanding…

Setting Up and Running the “Misty Reads” Skill with Microsoft Azure

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.

More from Medium

HTML Basics - Structure

Stop using pixel values in your CSS media queries

CSS (Cascading Style Sheets)

Essential CSS Tutorial — Part 3