CSS预处理器的出现大大的提高了前端开发的效率和逼格，它让CSS可编程化。LESS和Sass/SCSS是两种最为常见的预处理器，拥有大量的用户基数，数目庞杂的第三方库。然而，还有一种预处理器并未引起足够的重视，Stylus。
现在，我们来说说为什么Stylus很棒，为什么使用它，为什么它将会变成你的首选预处理器。
LESS、Sass很棒
具体介绍Stylus如何工作之前，我们先说说LESS、Sass给CSS带来了什么好处，然而却为什么不选择它们。
预处理器的基石
每种预处理器都包含了变量、混写（mixins）、嵌套和扩展，以及不同的度量单位、逻辑运算符和函数。通过这些你可以抽象出许多关键不疯，并重复使用，良好的逻辑和更少的代码能让你从书写CSS中获得前所未有的体验。
然而，最终促使我选择使用哪个预处理器原因就是它们之间细微的不同。
LESS：很棒
除了一些基本功能外，LESS外围的社区环境以及社区成员提供的大量资源是它的最大优势。想必没有一个前端工程没听说过Twitter Bootstrap的框架，这或许也是导致大部分人用LESS的原因之一。
另外一个使LESS脱颖而出的原因就是LESS的第三方库，LESShat，它提供了一系列针对CSS3效果的混写规则，并且还拥有针对Photoshop的配套插件CSShat，能够方便的识别PSD文件并生成LESS代码。假如你的Photoshop文件很复杂，那么这两个工具将会给你的工作流程提供强有力的支持。
还有一个重要因素或许是许多人发现它非常容易上手且易于使用。你可以仅用一个简单的Javascript文件编译它，也可以用IDE内置的编译器，还可以用nodejs在任何机器上编译它。
LESS：为什么不用
首先，我更倾向于写自己的代码而不是用第三方框架，并且我现在正在设计更简单的Photoshop，同时尽可能在浏览器中动态的设计，这有利于实时查看效果。所以，对我来说，上述提到的优势还不足以促使我去选择使用它。
但是最重要的原因其实是，LESS在逻辑处理上与另外两个预处理器相比真是大相径庭。
LESS只提供了少量的逻辑处理特性，以至于我们不得不为实现某些逻辑而增加代码的书写，这进一步导致了开发变缓以及后期维护成本的增加。
虽然LESS提供了一些逻辑处理，但是相比Stylus和Sass/Scss而言实在是太有限了。接下来我就会告诉你有限在哪里。
Sass:非常棒
Sass同样拥有活跃的社区，优质的资源。LESS有Twitter Bootstrap，Sass有Gumby和Foundation。LESS有LESShat，Sass有Compass和Bourbon。
但是相比LESS的逻辑处理能力而言，Sass简直就是神。在逻辑处理上，LESS勉强只能称得上为CSS增强写法，而Sass完全像一个复杂的编程语言。
举个例子,Sass能让你写出有效的条件检查，这很有用，尤其是在混写中。
@mixin border_and_bg( $border_on, $border_color, $bg_on, $bg_color ){
@if $border_on == true {
border: 1px solid $border_color;
} @else {
border: 0;
}
@if $bg_on == true {
background-color: $bg_color;
} @else {
background-color: transparent;
}
}这段代码检测$border_on是否为true，为true则输出的border颜色属性值为$border_color的值。如果为false则设置border属性为0。
同时它还检测了$bg_on是否为true，为true则输出background-color值为$bg_color的值。为false的话设置background-color为transparent。
这样，根据输入的值，我们就可以输出四种不同的样式。
然而，在LESS里面没有if/else判断，所以上面的代码就无法实现。你最多能用用所谓“Guarded Mixins”的方法，基于单条表达式的判断，就像这样：
.border_and_bg ( @border_on, @border_color, @bg_on, @bg_color ) when (@border_on = true) {
border: 1px solid @border_color;
}由于没有if/else函数，也就对随后检查@bg_on的值无能为力，也就不能在同一个混写当中根据可变的值设置border属性。
如果要实现Sass中同样的功能，你需要用LESS创建四条不同的混写，就像这样：
.border_and_bg ( @border_on, @border_color, @bg_on, @bg_color ) when (@border_on = true) and (@bg_on = true) {
border: 1px solid $border_color;
background-color: @bg_color;
}
.border_and_bg ( @border_on, @border_color, @bg_on, @bg_color ) when (@border_on = false) and (@bg_on = false) {
border: 0;
background-color: transparent;
}
.border_and_bg ( @border_on, @border_color, @bg_on, @bg_color ) when (@border_on = false) and (@bg_on = true) {
border: 0;
background-color: @bg_color;
}
.border_and_bg ( @border_on, @border_color, @bg_on, @bg_color ) when (@border_on = true) and (@bg_on = false) {
border: 1px solid @border_color;
background-color: transparent;
}这仅仅只是检查两个值，当你的代码越来越复杂，需检查的值越来越多，这种写法将会变得非常丑陋。处理好每条规则的顺序并一眼分辨它们也变得难上加难。
对比Sass，有木有发现Sass的逻辑处理能让你coding更加轻松，生活更加美好。Sass同样提供了超赞的流程控制，像：@for，@each和@while。
最后，在LESS中令人称赞的函数，同样能方便的Sass化。像这样：
@function function-name($parameter) {
@return $dosomething + $parameter / $somethingelse;
}这些逻辑函数让你有可能创建自己的布局引擎，用em而不是px，颜色定义，以及把大量的定义用法从一个项目转移到另一个项目，等等。
从我看到的听到的，以及我个人的使用经验来判断，人们使用Sass而不是LESS的很大原因就在于，它拥有强大逻辑处理能力。
Sass：还是不用
显然，LESS由于逻辑处理能力弱出局了，剩下Sass和Stylus，这两个都有一系列强有力的特性支撑。
然而，我选择Stylus，因为它既有Sass的强大，也具有LESS的易用性。
Stylues能做到所有Sass能做的，或许还更简单，却仅需要Javascript或者Node.js就能编译。它有的使用方法非常顺滑且简单，并且它优美简洁的语法也是我所钟爱的。
对我来说，最大的痛点就是用Sass的话必须运行Ruby on Rails并且和gems打交道。我的任何项目中都不会用到Ruby，我要为了使用Sass冒着装Ruby而导致的连接错误或者安装错误并去解决它显然有点得不偿失。
我非常好奇那么非Rubyer，为了使用Sass而装Ruby，真是有Geek精神。
假如我为了使用Sass而装了Ruby，但我的工作依然需要Node.js，依然需要NPM安装Glup，去监视文件的变化，压缩静态文件等等，依然需要安装Bower来管理其它的包。
所以，如果一个编译器像Stylus拥有强大的逻辑处理能力，并且与我平时所用的工具高度配合，这就是我选择它的原因。
很多人发现使用Sass需要历经复杂的Ruby安装，从而导致了它们使用LESS。现在，Stylus在给你强大逻辑处理的同时，也给了你像LESS一样简单易用的安装和编译方式。
抛开Ruby复杂的安装方式，仅就Sass强大的逻辑处理能力而言我可能也不会选择它。Stylus特别的工作方式以及易读的语法，相比LESS和Sass而言更加简洁、灵活和顺畅。
现在，我来告诉你为什么我选择Stylus，并且你也会乐意去选择。
用Stylus，现在
正如上所说，我选择Stylus因为：
- 强大的逻辑处理能力
- 仅仅用Node.js / JavaScript (no Ruby)就能编译
- 用Glup和Bower用到Nodejs，同样Stylus也需要，不会增加而外的负担
- 精简、灵活的语法
- 方便易用的特性
那么我来介绍一点stylus的用法，来作证为什么选择它。
很大一部分原因是因为我能用到平时项目中已经存在的工具处理Stylus，这些工具包括Stylus也能很好的与我所用的IDE协同。
Stylus语法
Stylus灵活的语法简直让我爱不释手。
在LESS里面你必须按照传统的方式书写，{}、：、；一个都不能少
Sass/SCSS给了你更多的选择：
- SCSS编译时提供给你更多的选择，那么你就可以用常规的CSS写法或者上面的写法
- Sass里面可以完全抛弃
{}、：、；，但是在这个文件里你也不能用常规的写法了
Stylus相对而言就灵活很多，不必去设置任何编译选项就能够兼容这两种写法
- 只要你觉得舒服完全可以用
{}、：、； - 当你不用的时候，只要使用适当的缩进就能达到效果
- 你也可以在同一个文件中混合使用这两种方式
以下写法都是合法的：
.my-style{
color: #000;
background-color: #fff;
border: 1px solid #ccc;
}
.my-style
color #000;
background-color #fff;
border 1px solid #ccc;
.my-style
color: #000
background-color: #fff
border: 1px solid #ccc
.my-style
color #000
background-color #fff
border 1px solid #ccc只有Stylus能完全省略这些标点符号，尽情发挥你的想象力，想怎么写就怎么写吧。
当你省略掉这些标点符号后，你会惊奇的发现你的代码会变得如此美妙。coding过程中，思维也变得无比的顺畅，高亮提示也进一步提高代码的可读性。
同时，编译器也是很人性滴。你可能出于某种理由要用常规的CSS写法，来让你的代码更有组织性，尽管用吧。假如你不慎漏写了一个分号，OK，没问题，没人会知道的。
Stylus变量，混写，流程控制和函数
你已经看到在LESS和Sass中，变量、混写、流程控制和函数是怎么样的。在我看来，Stylus中的方式更加可看、可读、可用。
在LESS里面，变量必须加上@前缀。在Sass里面，必须加上$前缀。在Stylus里面，不用加任何前缀。当然如果你喜欢你可以随便用$，但是@是内置的保留字，所以不能用它。
同样，混写、流程控制和函数不用加任何前缀。
在LESS里，一个混写必须按照像常规CSS的写法去写，并且LESS还没有流程控制和自定义函数。
在Sass里，混写必须以@mixin开头，并且使用的时候要用@include，条件控制用@if和@else,函数要以@function开头，并在函数内部有一行@return
这些条条框框在stylus里面通通没有，你可以很自然的写这些，就像写常规代码一样。早期我用Sass的时候这样写。
@mixin border_and_bg( $border_on, $border_color, $bg_on, $bg_color ){
@if $border_on == true {
border: 1px solid $border_color;
} @else {
border: 0;
}
@if $bg_on == true {
background-color: 1px solid $bg_color;
} @else {
background-color: transparent;
}
}@function function-name($parameter) {
@return $dosomething + $parameter / $somethingelse;
}使用的时候这样：
.callem {
@include border_and_bg(true, #000, true, #fff);
font-size: function-name( 6 );
}现在，在Stylus中这样写：
border_and_bg(border_on, border_color, bg_on, bg_color)
if border_on == true
border 1px solid border_color
else
border 0
if bg_on == true
background-color bg_color
else
background-color transparent
function-name(parameter)
dosomething + parameter /somethingelse
.callem
border_and_bg true #000 false #fff
font-size function-name(6)有木有感觉看起来和读起来都非常随意，并且编译后生成的代码也保持着简单易读。
当调用border_and_bg的时候，就像通常写CSS的方法，不用大括号、分号、冒号。当然你也可以使用这些标点符号，这取决于你。
一些妙招
Stylus拥有成吨的超赞特性，需要你自己去发现。
http://learnboost.github.io/stylus/
在此，有两个特性我必须要说说。
参数省略法
参数省略法允许你传入未定义个数的参数。你可以先传入一些确定的值参数，然后通过使用args...和args.获取剩余的值。例如：
padded_box(box_sizing,args...)
box-sizing box_sizing
padding args
.abox
padded_box border-box 5px 10px
.anotherbox
padded_box content-box 20px
//编译后
.abox {
box-sizing: border-box;
padding: 5px 10px;
}
.anotherbox {
box-sizing: content-box;
padding: 20px;
}
属性引用
有时候你可能会在一段CSS代码内重复使用某个值，如果专门为此设置一个变量，未免有点浪费资源。
我们有个大宝剑，通过它你可以方便的获取已经声明属性的值。例如:
.onemorepaddedbox
padding-left 20px
padding-right 30px
width 1200px - @padding-left - @padding-right
//编译后
.onemorepaddedbox {
padding-left: 20px;
padding-right: 30px;
1150px;
}你所需要做的只是用一个@标记符就行，Stylus会自动在本样式中寻找声明，找不到的话就去向上查找父元素，找不到继续向上，当查到根节点依然没有的话就返回“null”
总结
总而言之使用Stylus，不会让你后悔。