css：
都很熟悉CSS( Cascading style sheet，级联样式表):是前端最基础的关于样式的语言；主要是用来对网页的风格进行设计的，可以获得各种排版。
css preprocessor：
但是css写起来就是纯碎的一行行的属性描述，代码维护起来不方便，此时有人提出能不能对css加入一些编程的东西，可以对其进行一些预定的处理，这样就产生了css 预处理器（css preprocessor）。css preprocessor的思想是，用一种专门的编程语言可以将css preprocessor写出来的文件编译转为css文件。CSS预处理器技术已经非常的成熟，而且也涌现出了很多种不同的CSS预处理器语言，比如说：Sass（SCSS）、LESS、Stylus、Turbine、Swithch CSS、CSS Cacheer、DT CSS等。
sass：
(Syntactically Awesome Stylesheets 层叠样式表语言)，属于缩排语法。诞生于2007年，是由Hampton Catlin创立的。最早也是最成熟的一款CSS预处理器语言，它可以使用变量、常量、嵌套、混入、函数等功能，可以更有效有弹性的写出CSS。
它可以减化CSS的工作流，使开发者更加容易开发，维护CSS样式。
但是在Sass中是没有花括号（｛｝）和分号（；）的，是采用缩进作为分隔符来区分代码快的。
如下面的CSS：
#skyscraper_ad
display: block
width: 120px
height: 600px
#leaderboard_ad
display: block
width: 728px
height: 90px
scss：
属于sass，只是scss是采用的大括号作为分隔符，是在css3问世之后，基于此改进的sass得到的。是SASS的新语法，是Sassy CSS的简写，是CSS3语法的超集，
Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：
- 文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名
- 语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。
#skyscraper_ad {
display: block;
width: 120px;
height: 600px;
}
#leaderboard_ad {
display: block;
width: 728px;
height: 90px;
}
less：
2009年开源的一个项目，受Sass的影响较大，但又使用CSS的语法，让大部分开发者和设计师更容易上手。LESS提供了多种方式能平滑的将写好的代码转化成标准的CSS代码，在很多流行的框架和工具中已经能经常看到LESS的身影了（例如Twitter的Bootstrap框架就使用了LESS）。
@width: 10px;
@height: @width + 10px;
#header {
width: @width;
height: @height;
}
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu a {
color: #111;
.bordered();
}
.post a {
color: red;
.bordered();
}
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}
.component {
width: 300px;
@media (min-width: 768px) {
width: 600px;
@media (min-resolution: 192dpi) {
background-image: url(/img/retina2x.png);
}
}
@media (min-width: 1280px) {
width: 800px;
}
}
// numbers are converted into the same units
@conversion-1: 5cm + 10mm; // result is 6cm
@conversion-2: 2 - 3cm - 5mm; // result is -1.5cm
// conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // result is 4px
// example with variables
@base: 5%;
@filler: @base * 2; // result is 10%
@other: @base + @filler; // result is 15%
Stylus：
2010年产生，来自于Node.js社区，主要用来给Node项目进行CSS预处理支持，在此社区之内有一定支持者，在广泛的意义上人气还完全不如Sass和LESS。Stylus被称为是一种革命性的新语言，提供一个高效、动态、和使用表达方式来生成CSS，以供浏览器使用。Stylus同时支持缩进和CSS常规样式书写规则。
参考：
https://blog.csdn.net/weiyastory/article/details/54377104
http://www.w3cplus.com/css/css-preprocessor-sass-vs-less-stylus-2.html
