SASS VS LESS VS Stylus

为什么要作CSS Pre-processors?

没有人作吃力不讨好的工做嘛，有了多种不一样的CSS Pre-Processors那么表明着它们必定带来了不一样好处，问题是，带来了什么好处呢？最吸引开发者的好处是什么？它们有什么异同呢？若是公司作技术选型的时候最好选择哪种呢？

好处

• 浏览器前缀处理
• 复用的效率提高
  • 变量
  • mixin
• 嵌套书写，不用写重复的选择器

三个最知名的工具

• SASS
  • SASS中文文档
  • SASS中文参考手册
  • 2007年诞生，最先
  • ruby社区支持
  • 基于Ruby开发（gem install sass）
• LESS
  • 2009年诞生
  • CSS语法
  • 基于JS开发（npm install less）
  • Twitter Bootstrap使用
  • 问题：比起SASS的编程部分比较弱
  • LESS中文
• Stylus
  • 2010年诞生
  • 基于JS开发（npm install stylus）
  • 人气远不如SASS和LESS
  • 极客学院Stylus教程

简单比较

Features	SASS	Less	Stylus
变量	$开头	@开头	变量和值之间用等号
学习成本	中等	相近CSS，最小	中等
语法	缩进式(3.0+支持{})	{}	？
做用域	没有全局变量	向上查找	向上查找
mixin	@mixin+@include	直接调用	直接调用

重点特性

mixin

sass

申明：@mixin
调用：@include

/*声明一个Mixin叫做“error”*/
@mixin error($borderWidth:2px){ border:$borderWidth solid #f00; color: #f00; } /*调用error Mixins*/ .generic-error { @include error();/*直接调用error mixins*/ } .login-error { @include error(5px);/*调用error mixins，并将参数$borderWidth的值重定义为5px*/ } 

less

申明：对比sass，申明没有@mixin
调用：对比sass，调用没有@include

/*声明一个Mixin叫做“error”*/ .error(@borderWidth:2px){ border:@borderWidth solid #f00; color: #f00; } /*调用error Mixins*/ .generic-error { .error();/*直接调用error mixins*/ } .login-error { .error(5px);/*调用error mixins，并将参数@borderWidth的值重定义为5px*/ } 

stylus

申明：对比less，申明的时候没有‘.’
调用：直接函数调用

/*声明一个Mixin叫做“error”*/ error(borderWidth=2px){ border:borderWidth solid #f00; color: #f00; } /*调用error Mixins*/ .generic-error { error();/*直接调用error mixins*/ } .login-error { error(5px);/*调用error mixins，并将参数$borderWidth的值重定义为5px*/ } 

继承

sass && stylus

调用：@extend
生成代码：它是在父亲上直接把子选择器加上，因此代码没有冗余

.block { margin: 10px 5px; padding: 2px; } p { @extend .block;/*继承.block选择器下全部样式*/ border: 1px solid #eee; } ul,ol { @extend .block; /*继承.block选择器下全部样式*/ color: #333; text-transform: uppercase; } 

less

调用：直接
生成代码：它是copy的孩子的属性中，因此产生了冗余

.block { margin: 10px 5px; padding: 2px; } p { .block;/*继承.block选择器下全部样式*/ border: 1px solid #eee; } ul,ol { .block; /*继承.block选择器下全部样式*/ color: #333; text-transform: uppercase; } 

颜色函数

sass

lighten($color, 10%); /* 返回的颜色在$color基础上变亮10% */ darken($color, 10%); /* 返回的颜色在$color基础上变暗10% */ saturate($color, 10%); /* 返回的颜色在$color基础上饱和度增长10% */ desaturate($color, 10%); /* 返回的颜色在$color基础上饱和度减小10% */ grayscale($color); /* 返回$color的灰度色*/ complement($color); /* 返回$color的补色 */ invert($color); /* 返回$color的反相色 */ mix($color1, $color2, 50%); /* $color1 和 $color2 的 50% 混合色*/ 

saturate($color, $amount) desaturate($color, $amount) lighten($color, $amount) darken($color, $amount) adjust-hue($color, $amount) opacify($color, $amount) transparentize($color, $amount) mix($color1, $color2[, $amount]) grayscale($color) complement($color) 

less

lighten(@color, 10%); /* 返回的颜色在@color基础上变亮10% */ darken(@color, 10%); /* 返回的颜色在@color基础上变暗10%*/ saturate(@color, 10%); /* 返回的颜色在@color基础上饱和度增长10% */ desaturate(@color, 10%); /* 返回的颜色在@color基础上饱和度下降10%*/ spin(@color, 10); /* 返回的颜色在@color基础上色调增长10 */ spin(@color, -10); /* 返回的颜色在@color基础上色调减小10 */ mix(@color1, @color2); /* 返回的颜色是@color1和@color2二者的混合色 */ 

saturate(@color, @amount) desaturate(@color, @amount) lighten(@color, @amount) darken(@color, @amount) fadein(@color, @amount) fadeout(@color, @amount) fade(@color, @amount) spin(@color, @amount) mix(@color1, @color2, @weight) grayscale(@color) contrast(@color) 

stylus

lighten(color, 10%); /* 返回的颜色在'color'基础上变亮10% */ darken(color, 10%); /* 返回的颜色在'color'基础上变暗10% */ saturate(color, 10%); /* 返回的颜色在'color'基础上饱和度增长10% */ desaturate(color, 10%); /* 返回的颜色在'color'基础上饱和度下降10% */ 

red(color) green(color) blue(color) alpha(color) dark(color) light(color) hue(color) saturation(color) lightness(color) 

if

sass

.mixin (@color) when (lightness(@color) > 30%) { background-color: black; } .mixin (@color) when (lightness(@color) =<; 30%) { background-color: white; } 

less

@if lightness($color) > 30% { background-color: black; } @else { background-color: white; } 

stylus

if lightness(color) > 30% background-color black else background-color white 

for && loop

sass

@for $i from 1px to 3px { .border-#{i} { border: $i solid blue; } } 

less

.loop(@counter) when (@counter > 0){ .loop((@counter - 1)); .border-@{counter} { border: 1px * @counter solid blue; } } 

stylus

for num in (1..3) .border-{num} border 1px * num solid blue 

导入

@import

原始文件

/* file.{type} */ body { background: #EEE; } 

引用

@import "reset.css"; @import "file.{type}"; p { background: #0982C1; } 

& 选择父亲

section { margin:10px; nav { height:25px; a { color:#0982c1; &:hover { text-decoration:underline; } } } } 

Sass VS Scss

• Sass是（Syntactically Awesome StyleSheets），后缀.sass文件
• Scss是（Sassy CSS），后缀.scss文件

all features are available for both syntaxes

• Scss兼容CSS，语法相似，Less的学习和入手优点被抵消掉了
• CSS文件，直接就是合法的Scss文件
• Scss能够转化为Sass，相对容易
• Scss和Sass在功能上基本能作到1：1映射

结论

若是喜欢原生的CSS语法，选择less比较好上手，stylus用的人数不足，可是它其实部分兼容sass和less的开发者群体，一个全新的项目尝试一下新事物也没有问题，若是喜欢更强的功能那么就scss（变量做用域有点儿蛋疼）走起吧。
中国的互联网团队，用less稍微多点（知乎搜索的结果来看），国外的sass用户更多，并且文档、样例更加丰富。

参考

• 浅谈css预处理器，Sass、Less和Stylus
• CSS 的预处理程序（Sass、LESS、Stylus 等）分别都有哪些优缺点？
• CSS预处理器——Sass、LESS和Stylus实践
• Sass vs SCSS vs Less
• An Introduction to CSS Pre-Processors: SASS, LESS and Stylus