what is a css preprocessor? what are sass, less, and stylus? why do people use them?

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

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

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