A CSS Preprocessor is a tool used to extend the basic functionality of default VANILLA CSS through its own SCRIPTING LANGUAGE. It helps us to use complex logical syntax like – variables, functions, mixins, code nesting, and INHERITANCE to name a few, supercharging your vanilla CSS.

SASS: Sass is the acronym for “Syntactically Awesome Style Sheets”. SASS can be written in two different syntaxes using SASS or SCSS

SASS vs SCSS

• SASS is based on indentation and SCSS(Sassy CSS) is not.
• SASS uses .sass extension while SCSS uses .scss extension.
• SASS doesn’t use curly brackets or semicolons. SCSS uses it, just like the CSS.

SASS Syntax

SCSS Syntax

LESS: LESS is an acronym for “Leaner Stylesheets”. LESS is easy to add to any javascript projects by using NPM or less.js file. It uses the extension .less.

LESS syntax is the same as the SCSS with some exceptions. LESS uses @ to define the variables.

Stylus: Stylus offers a great deal of flexibility in writing syntax, supports native CSS as well as allows omission of brackets, colons, and semicolons. It doesn’t use @ or $ for defining variables.