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能够作防护型混合，这种混合只在条件为真的状况下生效。好比你想根据文本颜色来设置背景色，当文本色比较浅的时候背景色很深，文本色比较深的时候背景色很浅。那么你就得把混合分红两部分，以确保有一种状况条件为真，使混合生效。

.set-bg-color (@text-color) when (lightness(@text-color) >= 50%) {
  background: black;
}
.set-bg-color (@text-color) when (lightness(@text-color) < 50%) {
  background: #ccc;
}

而后就能够获得想要的背景：

.box-1 {
  color: #BADA55;
  .set-bg-color(#BADA55);
}

Less模拟循环和递归:

.loopingClass (@index) when (@index > 0) {
  .myclass {
    z-index: @index;
  }
  // 递归
  .loopingClass(@index - 1);
}
// 中止循环
.loopingClass (0) {}
   
// 输出
.loopingClass (3);

生成的css代码：

.myclass {z-index: 3;}
.myclass {z-index: 2;}
.myclass {z-index: 1;}

但这也就是Less所有的逻辑和循环处理能力了，而Sass具备真正的语言处理能力。包括if/then/else、for循环、while循环，函数等等。

真正的For循环：

@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”的混合，它会给你全部你须要的和想要的，而且兼容全部浏览器的代码。

简洁易懂的代码：

.bam {
  @include background(
    image-url("foo.png"),
    linear-gradient(top left, #333, #0c0),
    radial-gradient(#c00, #fff 100px)
  );
}

如今轮到这个怪物了（不幸的是，咱们须要它，看看咱们会获得的Css代码吧）：

.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中你能够这样写

.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代码

.module-a {
  /* 一堆css代码 */
} 
.module-b { 
  /* 一些覆盖和扩展代码 */
  @extend .module-a; 
}
最终编译Css代码
.module-a, .module-b {
  /* 一堆css代码 */
 }
.module-b {
  /* css代码*/
}

结果是Sass重写的选择器效率更高 获胜者：Sass 

变量

变量前缀：less使用"@",sass使用"$"。在css中@符号有继承的意义，而美圆符号没有。咱们能够说这个是我的喜爱。可是没有混淆概念的Sass在这里更有优点。 不过Sass的变量范围有些古怪，若是你在局部环境中重写了一个全局变量，全局变量的值会被改变。

$color: black;
.scoped {
  $color: white;
  color: $color;
}
.unscoped {
  // LESS = black (仍然是一开始定义的值black)
  // SASS = white (被改写为white)
  color: $color;
}

获胜者：Less

媒体查询

咱们开始使用媒体查询的方式是在主样式表的底部加入针对媒体查询的媒体代码块。这样作颇有用，可是它会致使响应的样式和原有的样式风格脱节。 CSS代码：

.some-class {
   /* 基础样式 */
}
    
/* 不少行之后 */
    
@media (max-width: 800px) {
  .some-class {
    /* 响应样式 */
  }
}

经过Sass或者Less，咱们能够用嵌套把他们写到一块儿：

.some-class {
  /* 基础样式 */
  @media (max-width: 800px) {
    /* 响应样式 */
  }
}

经过Sass，咱们甚至能够更牛逼一点，用一种更酷的写法：

=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

而后，咱们能够经过这种技术使代码更加简洁和语义化

.column

     width : 25%

     +respond-to(small- screen )

       width : 100%

须要Sass 3.2的环境（安装方法，在Start Command Prompt with Ruby中输入“gem install sass –pre”）

运算

在大多数状况下，数学运算都是很类似的。可是sass和less在处理单位的适合还有些不一样。例如less会假设第一个单位是你想要的，忽略后一个:

div {

    width : 100px + 2em ; // == 102px (怪异之处)

}

可是在Sass中，你会获得一个明确的错误提示：不兼容的单位"px"和"em"。我想是否应该提示错误是值得商榷的，可是相比之下我更但愿获得错误，特别是当我在处理难以追查的变量的时候。 sass容许咱们使用未知单位，可是less不能够。同时它们还有一些其余的不一样之处，好比sass如何为有单位的值作乘法，但这些都过于简单，不值得继续讨论。

胜利者：Sass

综上，虽然Sass比less稍难上手，但若是要使用Css预处理器的话，多花点时间在Sass上面是值得的。

英文原文:http://css-tricks.com/sass-vs-less/

参考资料:http://sass-lang.com/

本文出自:http://cued.xunlei.com/log044