CSS预处器的了解

到目前为止，在众多优秀的CSS预处理器语言中就属Sass、LESS和Stylus最优秀，讨论的也多，对比的也多。   

1.Sass背景介绍

Sass是对CSS（层叠样式表）的语法的一种扩充，诞生于2007年，最先也是最成熟的一款CSS预处理器语言，它可使用变量、常量、嵌套、混入、函数等功能，能够更有效有弹性的写出CSS。Sass最后仍是会编译出合法的CSS让浏览器使用，也就是说它自己的语法并不太容易让浏览器识别，由于它不是标准的CSS格式，在它的语法内部可使用动态变量等，因此它更像一种极简单的动态语言。

其实如今的Sass已经有了两套语法规则：一个依旧是用缩进做为分隔符来区分代码块的；另外一套规则和CSS同样采用了大括号（｛｝）做为分隔符。后一种语法规则又名SCSS，在Sass3以后的版本都支持这种语法规则。

注：Sass官网地址：http://sass-lang.com

2.LESS的背景介绍

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

根据维基百科上的介绍，其实LESS是Alexis Sellier受Sass的影响建立的一个开源项目。当时SASS采用了缩进做为分隔符来区分代码块，而不是CSS中广为使用的大括号（｛｝）。为了让CSS现有的用户使用起来更佳方便，Alexis开发了LESS并提供了相似CSS的书写功能。

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

3.Stylus背景介绍

Stylus，2010年产生，来自于Node.js社区，主要用来给Node项目进行CSS预处理支持，在此社区以内有必定支持者，在普遍的意义上人气还彻底不如Sass和LESS。

Stylus被称为是一种革命性的新语言，提供一个高效、动态、和使用表达方式来生成CSS，以供浏览器使用。Stylus同时支持缩进和CSS常规样式书写规则。

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

Sass、LESS和Stylus转译成CSS

Sass、LESS和Stylus源文件（除了LESS源文件在客户端下运行以外）都不能直接被浏览器直接识别，这样一来，要正常的使用这些源文件，就须要将其源文件转译成浏览器能够识别的CSS样式文件，这也是使用CSS预处理器很关键的一步，若是这一步不知道如何操做，那么意味着写出来的代码不可用。   

 

Sass、LESS和Stylus特性

这三款CSS预处理器语言具备一些相同的特性，例如：变量、混入、嵌套、函数等。在这一节中，咱们依次来对比一下这三款CSS预处理器语言各类特性的异同之处，以及使用方法。

 

综上所述，咱们对Sass、LESS和Stylus作一个简单的对比总结：

 

三者都是开源项目；

 

 Sass诞生是最先也是最成熟的CSS预处理器，有Ruby社区和Compass支持；Stylus早期服务器Node JS项目，在该社区获得必定支持者；LESS出现于2009年，支持者远超于Ruby和Node JS社区；

 

Sass和LESS语法较为严谨、严密，而Stylus语法相对散漫，其中LESS学习起来更快一些，由于他更像CSS的标准；

 

Sass和LESS相互影响较大，其中Sass受LESS影响，已经进化到了全面兼容CSS的SCSS；

Sass和LESS都有第三方工具提供转译，特别是Sass和Compass是绝配；

Sass、LESS和Stylus都具备变量、做用域、混合、嵌套、继承、运算符、颜色函数、导入和注释等基本特性，并且以“变量”、“混合”、“嵌套”、“继承”和“颜色函数”称为五大基本特性，各自特性实现功能基本类似，只是使用规则上有所不一样；

Sass和Stylus具备相似于语言处理的能力，好比说条件语句、循环语句等，而LESS须要经过When等关键词模拟这些功能，在这一方面略逊一层；

上面是CSS预处理器语言中的Sass、LESS和Stylus在某些方面的对比，相对于CSS来讲，上面都是CSS预处理器语言的优势？那么他有没有缺点呢？

万物都有阴阳两极，有圆就有缺，CSS预处理器语言也逃避不了这个宿命。我的感受CSS预处理器语言那是程序员的玩具，想经过编程的方式跨界解决CSS的问题。能够CSS应该面临的问题一个也少不了，只是增长了一个编译过程而已，简单来讲CSS预处理器语言较CSS玩法变得更高级了，但同时下降了本身对最终代码的控制力。更致命的是提升了门槛，首先是上手门槛，其次是维护门槛，再来是团队总体水平和规范的门槛。这也形成了初学学习成本的昂贵。