前端的css preprocessor

http://www.w3cplus.com/css/css-preprocessor-sass-vs-less-stylus-2.html 

1、css：都很熟悉CSS( Cascading style sheet，级联样式表):是前端最基础的关于样式的语言；主要是用来对网页的风格进行设计的，可以获得各种排版。

2、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等。

3、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; 
}

在Sass中，上面的CSS代码你要写成下面这样：

#skyscraper_ad 
  display: block 
  width: 120px 
  height: 600px 
#leaderboard_ad 
  display: block 
  width: 728px 
  height: 90px

http://www.w3cplus.com/css/the-absolute-beginners-guide-to-sass.html

官网：http://sass-lang.com

4、scss：属于sass，只是scss是采用的大括号作为分隔符，是在css3问世之后，基于此改进的sass得到的。是SASS的新语法，是Sassy CSS的简写，是CSS3语法的超集，

Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：

1. 文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名
2. 语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。

http://www.imooc.com/code/6373

5、less：

2009年开源的一个项目，受Sass的影响较大，但又使用CSS的语法，让大部分开发者和设计师更容易上手。LESS提供了多种方式能平滑的将写好的代码转化成标准的CSS代码，在很多流行的框架和工具中已经能经常看到LESS的身影了（例如Twitter的Bootstrap框架就使用了LESS）。

LESS的官网：http://lesscss.org

LESS是受Sass启发而开发的工具，它列出了如下开发的理由：

“为什么要开发一个Sass的替代品呢？原因很简单：首先是语法。Sass的一个关键特性是缩进式的语法，这种语法可以产生柱式外观的代码。但是你需要花费时间学习一门新的语法以及重新构建你现在的样式表。
LESS给CSS带来了很多特性，使得LESS能够和CSS无缝地紧密结合在一起。因此，你可以平滑地由CSS迁移到LESS，如果你只是对使用变量或者操作感兴趣的话，你不需要学习一整门全新的语言。”

作者：槱木
链接：https://www.zhihu.com/question/20300388/answer/18155157
来源：知乎
著作权归作者所有，转载请联系作者获得授权。

6、Stylus：

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

Stylus 相对前两者(SASS/LESS)较新，可以看官方文档介绍的功能。
1.来自NodeJS社区，所以和NodeJS走得很近，与JavaScript联系非常紧密。还有专门JavaScript API： http:// learnboost.github.io/st ylus/docs/js.html
2.支持Ruby之类等等框架
3.更多更强大的支持和功能

作者：槱木
链接：https://www.zhihu.com/question/20300388/answer/18155157
来源：知乎
著作权归作者所有，转载请联系作者获得授权。

注：Stylus官网：http://learnboost.github.com/stylus