# CSS Preprocessor? What are Sass, Less, and Stylus?

# 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:
@font-color: #fff;
@bg-color: #00f

#box{
color: @font-color;
background: @bg-color;
}
# Stylus:
/* 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;