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%

http://lesscss.org/

Stylus：

2010年产生，来自于Node.js社区，主要用来给Node项目进行CSS预处理支持，在此社区之内有一定支持者，在广泛的意义上人气还完全不如Sass和LESS。Stylus被称为是一种革命性的新语言，提供一个高效、动态、和使用表达方式来生成CSS，以供浏览器使用。Stylus同时支持缩进和CSS常规样式书写规则。

http://stylus-lang.com/

参考：
https://blog.csdn.net/weiyastory/article/details/54377104
http://www.w3cplus.com/css/css-preprocessor-sass-vs-less-stylus-2.html

【转】前端的css preprocessor