CSS预处理器实践之Sass、Less大比拼
什么是CSS预处理器？
CSS可以让你做很多事情，但它毕竟是给浏览器认的东西，对开发者来说，Css缺乏很多特性，例如变量、常量以及一些编程语法，代码难易组织和维护。这时Css预处理器就应运而生了。Css预处理器定义了一种新的语言将Css作为目标生成文件，然后开发者就只要使用这种语言进行编码工作了。预处理器通常可以实现浏览器兼容，变量，结构体等功能，代码更加简洁易于维护。 “我应该选择哪种css预处理器？”是最近网上的一大热门话题，很多人为此争论不休。相比过去我们对是否应该使用Css预处理器的话题，这已经是很大的进步了。目前比较流行的两种预处理器是Sass和Less。
至于他们谁更优秀一些：简短的答案是:Sass
稍长一点的答案：Sass比其他任何预处理器语言都好，但如果你正在使用Less，这也很酷！这可以证明你正在使用预处理器来写帮助自己写更好的代码。
非常长的答案：请继续往下看
使用之前需要学习的知识 – Ruby，js，命令行等等
使用Css预处理器唯一真正需要学习的只有语法，SASS是Ruby语言写的，但是两者的语法没有关系。不懂Ruby，照样可以使用。你需要的只是一个像CudeKit的应用来观察和编译你所撰写的文件。 Less就更不用了，只需要调用一个js即可(在客户端运行)，或者借助Node.js（服务器运行）。
获胜者：无。
对css3的帮助
Css3提供了很多新特性，比如渐变、动画、圆角等等，但是在使用这些高级特性的时候，我们往往需要编写浏览器前缀( -moz-、-webkit-、-ms- …)。不论Sass和Less，你都可以用自己的混合来编写浏览器前缀。但是在项目中当我们需要修改这些繁琐的前缀时，我们如何不用返回每一行代码并且更新它们？你大概也不会更新手工混合的文件。但是在Sass中，我们可以使用开源的Css框架Compass，Compass会自动更新并自动处理浏览器前缀。我们只需要保持更新，外加偶尔按一下编译键，它就会帮助我们自动处理所有的前缀问题，毫不费力。
获胜者：Sass。
逻辑/循环
Less可以做防御型混合，这种混合只在条件为真的情况下生效。比如你想根据文本颜色来设置背景色，当文本色比较浅的时候背景色很深，文本色比较深的时候背景色很浅。那么你就得把混合分成两部分，以确保有一种情况条件为真，使混合生效。
|
1
2
3
4
5
6
|
.set-bg-color (@text-color) when (lightness(@text-color) >=
50%
) {
background
:
black
;
}
.set-bg-color (@text-color) when (lightness(@text-color) <
50%
) {
background
:
#ccc
;
}
|
然后就可以得到想要的背景：
|
1
2
3
4
|
.box
-1
{
color
:
#BADA55
;
.set-bg-color(
#BADA55
);
}
|
Less模拟循环和递归:
|
1
2
3
4
5
6
7
8
9
10
11
12
|
.loopingClass (@index) when (@index >
0
) {
.myclass {
z-index
: @index;
}
// 递归
.loopingClass(@index -
1
);
}
// 停止循环
.loopingClass (
0
) {}
// 输出
.loopingClass (
3
);
|
生成的css代码：
|
1
2
3
|
.myclass {
z-index
:
3
;}
.myclass {
z-index
:
2
;}
.myclass {
z-index
:
1
;}
|
但这也就是Less全部的逻辑和循环处理能力了，而Sass具有真正的语言处理能力。包括if/then/else、for循环、while循环，函数等等。
真正的For循环：
|
1
2
3
4
5
6
7
8
9
|
@for $i from
1
through
3
{
.item-#{$i}{
width
:
100px
*$i;
}
}
Css:
.item
-1
{
width
:
100px
;}
.item
-2
{
width
:
200px
;}
.item
-3
{
width
:
300px
;}
|
例如Compass框架有一个叫“background”的混合，它会给你所有你需要的和想要的，并且兼容所有浏览器的代码。
简洁易懂的代码：
|
1
2
3
4
5
6
7
|
.bam {
@include background(
image-
url
(
"foo.png"
),
linear-gradient(
top
left
,
#333
,
#0c0
),
radial-gradient(
#c00
,
#fff
100px
)
);
}
|
现在轮到这个怪物了（不幸的是，我们需要它，看看我们会得到的Css代码吧）：
|
1
2
3
4
5
6
7
8
|
.bam {
background
:
url
(
"/foo.png"
), -webkit-gradient(linear,
0%
0%
,
100%
100%
, color-stop(
0%
,
#333333
), color-stop(
100%
,
#00cc00
)), -webkit-gradient(radial,
50%
50%
,
0
,
50%
50%
,
100
, color-stop(
0%
,
#cc0000
), color-stop(
100%
,
#ffffff
));
background
:
url
(
"/foo.png"
), -webkit-linear-gradient(
top
left
,
#333333
,
#00cc00
), -webkit-radial-gradient(
#cc0000
,
#ffffff
100px
);
background
:
url
(
"/foo.png"
), -moz-linear-gradient(
top
left
,
#333333
,
#00cc00
), -moz-radial-gradient(
#cc0000
,
#ffffff
100px
);
background
:
url
(
"/foo.png"
), -o-linear-gradient(
top
left
,
#333333
,
#00cc00
), -o-radial-gradient(
#cc0000
,
#ffffff
100px
);
background
:
url
(
"/foo.png"
), -ms-linear-gradient(
top
left
,
#333333
,
#00cc00
), -ms-radial-gradient(
#cc0000
,
#ffffff
100px
);
background
:
url
(
"/foo.png"
), linear-gradient(
top
left
,
#333333
,
#00cc00
), radial-gradient(
#cc0000
,
#ffffff
100px
);
}
|
获胜者：Sass
继承
当你声明一个包涵一些样式的类之后，你想要另外一个和它只有少许不同的类，在less中你可以这样写
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
.module-a{
color
:
#333
;
}
.module-b {
.module-a();
/* 把module-a所有的css代码拷贝到这里 */
border
:
1px
solid
red
;
}
这样.module-b便继承了.module-a的所有属性 生成的Css代码:
.module-a{
color
:
#333
;
}
.module-b {
color
:
#333
;
border
:
1px
solid
red
;
}
|
这在本质上就是继承，在Sass中也可以做同样的事情。但Sass的"@extend"更好一些，在"@extend"中.module-a的样式不仅仅是被复制到.module-b(可以扩展)中，在Css中对.module-a的定义被修改为.module-a,.module-b（这样做选择器的效率更高）。
Sass代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
.module-a {
/* 一堆css代码 */
}
.module-b {
/* 一些覆盖和扩展代码 */
@extend .module-a;
}
最终编译Css代码
.module-a, .module-b {
/* 一堆css代码 */
}
.module-b {
/* css代码*/
}
|
结果是Sass重写的选择器效率更高 获胜者：Sass
变量
变量前缀：less使用"@",sass使用"$"。在css中@符号有继承的意义，而美元符号没有。我们可以说这个是个人喜好。但是没有混淆概念的Sass在这里更有优势。 不过Sass的变量范围有些古怪，如果你在局部环境中重写了一个全局变量，全局变量的值会被改变。
|
1
2
3
4
5
6
7
8
9
10
|
$
color
:
black
;
.scoped {
$
color
:
white
;
color
: $color;
}
.unscoped {
// LESS =
black
(仍然是一开始定义的值
black
)
// SASS =
white
(被改写为
white
)
color
: $color;
}
|
获胜者：Less
媒体查询
我们开始使用媒体查询的方式是在主样式表的底部加入针对媒体查询的媒体代码块。这样做很有用，但是它会导致响应的样式和原有的样式风格脱节。 CSS代码：
|
1
2
3
4
5
6
7
8
9
10
11
|
.some-class {
/* 基础样式 */
}
/* 很多行以后 */
@media (
max-width
:
800px
) {
.some-class {
/* 响应样式 */
}
}
|
通过Sass或者Less，我们可以用嵌套把他们写到一起：
|
1
2
3
4
5
6
|
.some-class {
/* 基础样式 */
@media (
max-width
:
800px
) {
/* 响应样式 */
}
}
|
通过Sass，我们甚至可以更牛逼一点，用一种更酷的写法：
|
1
2
3
4
5
6
7
8
9
|
=respond-to($name)
@if $name == small-
screen
@media only
screen
and (
min-width
:
320px
)
@content
@if $name == large-
screen
@media only
screen
and (
min-width
:
800px
)
@content
|
然后，我们可以通过这种技术使代码更加简洁和语义化
|
1
2
3
4
|
.column
width
:
25%
+respond-to(small-
screen
)
width
:
100%
|
需要Sass 3.2的环境（安装方法，在Start Command Prompt with Ruby中输入“gem install sass –pre”）
运算
在大多数情况下，数学运算都是很相似的。但是sass和less在处理单位的适合还有些不同。例如less会假设第一个单位是你想要的，忽略后一个:
|
1
2
3
|
div {
width
:
100px
+
2em
; // ==
102px
(怪异之处)
}
|
但是在Sass中，你会得到一个明确的错误提示：不兼容的单位"px"和"em"。我想是否应该提示错误是值得商榷的，但是相比之下我更希望得到错误，特别是当我在处理难以追查的变量的时候。 sass允许我们使用未知单位，但是less不可以。同时它们还有一些其他的不同之处，比如sass如何为有单位的值做乘法，但这些都过于简单，不值得继续讨论。
胜利者：Sass
综上，虽然Sass比less稍难上手，但如果要使用Css预处理器的话，多花点时间在Sass上面是值得的。