What is a CSS Preprocessor? What are Sass, Less, and Stylus?

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

$font-color: #fff 
$bg-color: #00f

#box
	color: $font-color
	background: $bg-color

SCSS Syntax

$font-color: #fff;
$bg-color: #00f;

#box{
	color: $font-color;
	background: $bg-color;
}

LESS

LESS is an acronym for “Leaner Stylesheets”. LESS is easy to add to any javascript project 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.

@font-color: #fff;
@bg-color: #00f

#box{
	color: @font-color;
	background: @bg-color;
}

Stylus

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

/* STYLUS SYNTAX WRITTEN LIKE NATIVE CSS */
font-color= #fff;
bg-color = #00f;

#box {
	color: font-color;
	background: bg-color;
}

/* OR */

/* STYLUS SYNTAX WITHOUT CURLY BRACES */
font-color= #fff;
bg-color = #00f;

#box
	color: font-color;
	background: bg-color;