CSS预处理器的对比—Sass、Less和Stylus

上面只是Mixins在三个CSS预处器的简单区别，详细的还可以进入他们的官网了解，或者对比一下上面的三段代码。

继承（Inheritance）

在多个元素应用相同的样式时，我们在CSS通常都是这样写：

p,
ul,
ol {
 /* 样式写在这 */
}

这样做非常的好，但往往我们需要给单独元素添加另外的样式，这个时候我们就需要把其中选择器单独出来写样式，这样一回来我们维护样式就相当的麻烦。为了应对这个问题，CSS预处理器可以从一个选择继承另一个选择器下的所有样式。

sass和stylus

.block {
 margin: 10px 5px;
 padding: 2px;
}
p {
 @extend .block; /* 继承.block所有样式 */
 border: 1px solid #EEE;
}
ul, ol {
 @extend .block; /* 继承.block所有样式 */
 color: #333;
 text-transform: uppercase;
}

转译出来的CSS

.block, p, ul, ol {
 margin: 10px 5px;
 padding: 2px;
}
p {
 border: 1px solid #EEE;
}
ul, ol {
 color: #333;
 text-transform: uppercase;
}

less

less支持的继承和sass与stylus不一样,他不是在选择器上继承，而是将Mixins中的样式嵌套到每个选择器里面。这种方法的缺点就是在每个选择器中会有重复的样式产生。

 .block {
 margin: 10px 5px;
 padding: 2px;
}
p {
 .block; /* 继承 '.block'中的样式 */
 border: 1px solid #EEE;
}
ul, ol {
 .block; /*继承'.block' 中的样式*/
 color: #333;
 text-transform: uppercase;
}

转译出来的CSS

.block {
 margin: 10px 5px;
 padding: 2px;
}
p {
 margin: 10px 5px;
 padding: 2px;
 /* 继承 '.block'中的样式 */
 border: 1px solid #EEE;
}
ul,
ol {
 margin: 10px 5px;
 padding: 2px;
 /*继承'.block' 中的样式*/
 color: #333;
 text-transform: uppercase;
}

正如所看到的，上面的代码.block的样式将会被插入到相应的你要继承的选择器中，但需要注意是的优先级的问题。

导入（import）

在CSS中，并不喜欢用@import来导入样式，因为这样的做法会增加HTTP的请求。但是在CSS预处理器中的导入@import规则和CSS的有所不同，它只是在语义上导入不同的文件，但最终结果是生成一个CSS文件。如果你是通过@import 'file.css'导入file.css样式文件，那效果跟普通CSS导入样式文件一样。注意：导入文件中定义了变量、混合等信息也将会被引入到主样式文件中，因此需要避免他们的相互冲突。

sass、less和stylus

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

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

转译出来的CSS

@import "reset.css";
body {
 background: #EEE;
}
p {
 background: #0982C1;
}

颜色函数

颜色函数是CSS预处里器中内置的颜色函数功能，这些功能可以对颜色值进行处理，例如颜色的变亮、变暗、渐变颜色等处理十分的方便。

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); /* returns complement color of $color */
invert($color); /* 返回$color的反相色 */
mix($color1, $color2, 50%); /* mix $color1 with $color2 with a weight of 50% */

这只是sass中颜色函数的一个简单列表,更多详细的介绍你可以阅读 sass文档 。

颜色函数何以运用到任何一个元素上都是一个有颜色的CSS属性，下面是一个简单的例子：

$color: #0982C1;
h1 {
 background: $color;
 border: 3px solid darken($color, 50%);/*边框颜色在$color的基础上变暗50%*/
}

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两者的混合色 */

less的完整颜色函数功能，请阅读 less 文档。

下面是less中如何使用一个颜色函数的简单例子

@color: #0982C1;
h1 {
 background: @color;
 border: 3px solid darken(@color, 50%);
}

stylus

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

有关于stylus的颜色函数介绍，请阅读 stylus文档。

下面是stylus颜色函数的一个简单实例

color = #0982C1
h1
 background color
 border 3px solid darken(color, 50%)

运算符（Operations）

我们都向往在CSS做一些运算，但是无法实现。但是在CSS预处器中对样式做一些运算是一点问题都没有了，例如：

sass、less和stylus

body {
 margin: (14px/2);
 top: 50px + 100px;
 right: 100px - 50px;
 left: 10 * 10;
}

实际运用

我们介绍了CSS预处理器各方面的特性，但我们还没有实战过。下面是CSS预处理器应用的一些例子。

属性前缀

这是宣传CSS预处理器的原因之一，并且是一个很好的理由，这样可以节省大量的时间和汗水。创建一个minxin来处理浏览器的前缀问题是一个很简单的，并且能节省大量的重复工作和痛苦的代码编辑，我们来看一个例子。

sass

@mixin border-radius($values) {
 -webkit-border-radius: $values;
 -moz-border-radius: $values;
 border-radius: $values;
}
p {
 @include border-radius(10px);
}

less

.border-radius(@values) {
 -webkit-border-radius: @values;
 -moz-border-radius: @values;
 border-radius: @values;
}
p {
 .border-radius(10px);
}

stylus

border-radius(values) {
 -webkit-border-radius: values;
 -moz-border-radius: values;
 border-radius: values;
}
p {
 border-radius(10px);
}

转译出来的CSS

p {
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 border-radius: 10px;
}

浏览器前缀的问题，主要是针对于CSS3属性的运用，众所周知，CSS3的属性有并不是所有浏览器都支持属性的标准语法，因此在实际运用中时，不得不加上各浏览器的前缀来识别，这对于我们前端人员来说是多么苦逼的一件事情。虽然有prefix这样的js脚本帮我们解决，但对于怎么说也需要额外添加一个脚本文件，这对于追求完美的同学来说可能完法接受。
现在多了一种解决方案，就是使用CSS预处理器，如上面圆角的实现方法，这样减轻了我们很多工作量。如果你对这一部分实现方法感兴趣，不仿花时间阅读一下以下源码：

3D文本

使用text-shadow的多重属性制作3D文本效果是一个很好的方法。唯一麻烦的问题就是修改文本阴影的颜色。如果我们使用Mixin和颜色函数的话，实现3D文本效果就非常的轻松了，我们来尝试一下。

sass

@mixin text3d($color) {
 color: $color;
 text-shadow: 1px 1px 0px darken($color, 5%),
 2px 2px 0px darken($color, 10%),
 3px 3px 0px darken($color, 15%),
 4px 4px 0px darken($color, 20%),
 4px 4px 2px #000;
}
h1 {
 font-size: 32pt;
 @include text3d(#0982c1);
}

less

.text3d(@color) {
 color: @color;
 text-shadow: 1px 1px 0px darken(@color, 5%),
 2px 2px 0px darken(@color, 10%),
 3px 3px 0px darken(@color, 15%),
 4px 4px 0px darken(@color, 20%),
 4px 4px 2px #000;
}
span {
 font-size: 32pt;
 .text3d(#0982c1);
}

stylus

text3d(color)
 color: color
 text-shadow: 1px 1px 0px darken(color, 5%), 2px 2px 0px darken(color, 10%), 3px 3px 0px darken(color, 15%), 4px 4px 0px darken(color, 20%), 4px 4px 2px #000
span
 font-size: 32pt
 text3d(#0982c1)

在stylus中text-shadow的样式写在一行，是因为stylus中省略了花括号｛｝和分号;。
上面三种方法实现的效果都是一样的：

列（Columns）

我第一次接触CSS预处理器的时候，我就想着使用数字或者变量进行运算。使用数值和变量运算，可以很方便的实现适应屏幕大小的布局处理。只需要定义宽度的变量，我们就可以很方便的根据需求实现布局。下面的例子就是这么做的。

sass

$siteWidth: 1024px;
$gutterWidth: 20px;
$sidebarWidth: 300px;
body {
 margin: 0 auto;
 width: $siteWidth;
}
.content {
 float: left;
 width: $siteWidth - ($sidebarWidth+$gutterWidth);
}
.sidebar {
 float: left;
 margin-left: $gutterWidth;
 width: $sidebarWidth;
}

less

@siteWidth: 1024px;
@gutterWidth: 20px;
@sidebarWidth: 300px;
body {
 margin: 0 auto;
 width: @siteWidth;
}
.content {
 float: left;
 width: @siteWidth - (@sidebarWidth+@gutterWidth);
}
.sidebar {
 float: left;
 margin-left: @gutterWidth;
 width: @sidebarWidth;
}

stylus

siteWidth = 1024px;
gutterWidth = 20px;
sidebarWidth = 300px;
body {
 margin: 0 auto;
 width: siteWidth;
}
.content {
 float: left;
 width: siteWidth - (sidebarWidth+gutterWidth);
}
.sidebar {
 float: left;
 margin-left: gutterWidth;
 width: sidebarWidth;
}

转译出来的CSS

body {
 margin: 0 auto;
 width: 1024px;
}
.content {
 float: left;
 width: 704px;
}
.sidebar {
 float: left;
 margin-left: 20px;
 width: 300px;
}

错误报告

如果你经常使用CSS，你会发现很难找到CSS中出错的地方。也许你也会像我一样，花一下午的时间，发了疯的注解每行样式代码来寻找这个CSS错误。

CSS预处理器就轻松多了，他会给你报告错误。你可以阅读这篇文章，学习如何让CSS预处理器报告错误。

注释(Comments)

CSS预处理器支持/* */这样的多行注释方式（类似于CSS的注释方式），也支持//单行注释方式（类似于Javascript的注释方式）。

需要注意，如果你要压缩文件，你需要把所有注释都删除。

总结

三个预处理器我们都覆盖了（sass、less和stylus），都以他们独特的特性完成了相同的效果。这样让开发人员更好的选择适合自己的CSS预处理器，从而更好的维护自己的代码，提高开发效率。

虽然不是开发的要求,但CSS预处理器可以节省大量的时间，并且有一些非常有用的功能。

我鼓励大家尽可能的尝试使用CSS预处理器，这样就可以有效的让你选择一个你最喜欢的和知道他为什么是受人青睐的。如果你还没有尝试过使用CSS预处理器来写你的CSS样式，我强烈建议你尝试一下。
如果你有最喜欢的CSS预处理器的功能，我并没有提到的，希望在下面的评论中与我们分享。

译者手语： 整个翻译依照原文线路进行，并在翻译过程略加了个人对技术的理解。如果翻译有不对之处，还烦请同行朋友指点。谢谢！

更多CSS预处理器的对比 — Sass、Less和Stylus 相关文章请关注PHP中文网！