LESS-vs-SASS

基于less 2.0 与 sass 3.5.7的官方文档对两者的功能和语法进行一些简单的比较.

Variable

两者都支持向_选择器名_、_属性名_、_属性值_和_字符串_中注入变量，并都支持数值变量的计算：

//sass
$left: left;
$variable: variable;
$num3px: 3px;
$num5: 5;

.#{$variable}{
    margin-#{$left}: $num3px + $num5;
    float: $left;
    content: "#{$variable}";
}
//less
@left:left;
@variable:variable;
@num3px: 3px;
@num5: 5;

.@{variable}{
    margin-@{left}: @num3px + @num5;
    float: @left;
    content: "@{variable}";
}

但只有sass支持字符串的连接：

$hel:"hel";
$lo:"lo";
$hello: $hel + $lp;

在sass中，变量更复杂的类型的，同时提供了如 !default 和 !global 标记。

@import

两者的 @import 指令都默认引入同类型的.less/.scss 文件，同时也支持嵌套：

.mark{
    @import "item";
}

都输出：

.mark .item{}

如果要被引入的是一个 css 文件，sass 不执行任何操作，less 可以根据指令执行多种操作，例如，可以将 css 当做 less 处理：

@import (less) "common.css";

或者直接引入不执行任何处理操作：

@import (inline) "common.css";

@media

两者都支持媒体查询选择器提升：

.wrap{
    @media screen{
        .item{
            color: red;
        }
    }
}

输出：

@media screen {
    .wrap .item {
        color: red;
    }
}

Extend

两者都支持extend：

//less
.wrap{
    &:extend(.on);
}
.on{font-size:10px;}

//sass
.wrap{
    @extend .on;
}
.on{font-size:10px;}

输出：

.wrap .on{font-size:10px;}

sass 实现了 !optional 标记用以屏蔽错误。

Mixins

两者都支持mixin：

//less
.fork(){font-size:20px;}
.banner{
    .fork;
}

//sass
@mixin fork(){font-size:20px;}
.banner{
    @include fork;
}

对于 sass，必须使用 @mixin 指令定义一个 mixin，个人感觉 less 更方便一些，直接写入选择器名，也不需要 @include 指令，特别是 mixin 本身去掉圆括号之后也可以作为一个合法的css选择器。

判断

都支持判断：

//less
@tick:1;
& when(@tick<5){
    .tick{
        & when(@tick<5){
            color:red;
        }
        font-size: 10px;
    }
}

//sass
$tick:1;
@if $tick < 5{
    .tick {
        @if $tick < 5{
            color:red;
        }
        font-size: 10px;
    }
}

循环

less 仰赖判断实现循环：

//less
.loop(@counter) when (@counter > 0) {
    .loop((@counter - 1));
    .item-@{counter}{
        left: (10px * @counter);
    }
}

.loop(5);

sass 实现了 @for 指令：

//sass
@for $counter from 1 through 5{
    .item-#{$counter}{
        left: #{$counter * 10px};
    }
}

除此之外，sass 还实现了功能强大的 @each 和 @while 指令，这是 less 做不到的。

总结

less 与 sass 在常规功能上不相上下，less 可能稍稍略逊一点，不过书写上要相对简洁。一些 sass 的实现比如 @at-root 个人认为用处不大，使用反倒增加了阅读代码的难度。从环境部署上看，sass 需要 ruby 环境，而 less 基于 js，相对更容易在多种环境中使用。

CSS 预处理器的使用要以简化书写 CSS 和清晰展示选择符层次为重，从这点上来讲，并不需要太复杂的功能，我比较倾向于使用 less。