CUED-迅雷用户体验设计中心

Css预处理器实践之Sass、Less大比拼

什么是CSS预处理器?

Css可以让你做很多事情,但它毕竟是给浏览器认的东西,对开发者来说,Css缺乏很多特性,例如变量、常量以及一些编程语法,代码难易组织和维护。这时Css预处理器就应运而生了。Css预处理器定义了一种新的语言将Css作为目标生成文件,然后开发者就只要使用这种语言进行编码工作了。预处理器通常可以实现浏览器兼容,变量,结构体等功能,代码更加简洁易于维护。 “我应该选择哪种css预处理器?”是最近网上的一大热门话题,很多人为此争论不休。相比过去我们对是否应该使用Css预处理器的话题,这已经是很大的进步了。目前比较流行的两种预处理器是SassLess。

至于他们谁更优秀一些:简短的答案是:Sass

稍长一点的答案:Sass比其他任何预处理器语言都好,但如果你正在使用Less,这也很酷!这可以证明你正在使用预处理器来写帮助自己写更好的代码。

非常长的答案:请继续往下看

使用之前需要学习的知识 – Ruby,js,命令行等等

使用Css预处理器唯一真正需要学习的只有语法,SASS是Ruby语言写的,但是两者的语法没有关系。不懂Ruby,照样可以使用。你需要的只是一个像CudeKit的应用来观察和编译你所撰写的文件。 Less就更不用了,只需要调用一个js即可(在客户端运行),或者借助Node.js(服务器运行)。

获胜者:无。

对css3的帮助

Css3提供了很多新特性,比如渐变、动画、圆角等等,但是在使用这些高级特性的时候,我们往往需要编写浏览器前缀( -moz-、-webkit-、-ms- …)。不论Sass和Less,你都可以用自己的混合来编写浏览器前缀。但是在项目中当我们需要修改这些繁琐的前缀时,我们如何不用返回每一行代码并且更新它们?你大概也不会更新手工混合的文件。但是在Sass中,我们可以使用开源的Css框架CompassCompass会自动更新并自动处理浏览器前缀。我们只需要保持更新,外加偶尔按一下编译键,它就会帮助我们自动处理所有的前缀问题,毫不费力。

获胜者: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/

  1. http://www.lesscss.net,
    LESS 将 CSS 赋予了动态语言的特性,如 变量, 继承, 运算, 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox),也可以借助Node.js或者Rhino在服务端运行。两个差不多,各有千秋。不过less官方有中文相关说明,估计普及的更快。

  2. […] http://cued.xunlei.com/log044 上一篇: Jscex与Promise/A那些事 下一篇: 发现闪屏之美 if (typeof DUOSHUO […]

  3. […] Css预处理器实践之Sass、Less大比拼 xwei | 2012-07-07 16:16  | 网页重构 […]

  4. 太主观了,
    第一条“获胜者,无”,很明显是“LESS”胜,Less在浏览器和服务器都能跑,在线编译工具也一大堆
    第二条,不能因为Sass有Compass这个框架,就胜出,LESS同样有:http://lessprefixer.com/
     
    当然,SASS确实不错

  5. 飓龙 说:

    sass是个软件吗?在哪里能下载到?还是是别的东西什么的。要怎么用?

  6. finder 说:

    准备在项目中使用css框架,谢谢你提供的信息

  7. 惠库 说:

    非常感谢你的评判.
     

  8. jerossh 说:

    hey,已经打算用less了~谢谢分享

  9. 一个有趣的事情是,大家都沉浸在神奇的世界。那很有意思。感谢您与我们分享
    tower defense games

  10. 您的内容是很不错的。感谢分享。

  11. 专业就是专业,专业的连名词都没见过,好好收藏下来,慢慢学习了

  12. seobore 说:

    惭愧,写网页时,没用过预处理器、都只测试几个主流浏览器、跟专业人士没法比。

  13. tom 说:

    头疼,这样看样式代码的话,一点都不直观了。还是原生好

  14. zoowar 说:

    感觉还是写原生的要舒服点,大不了写个样式库了。这样搞的都是库了。

  15. […] 前不久,也看到一篇文章,是关于比较Sass和Less的,大家也可以看一下,地址是:Css预处理器实践之Sass、Less大比拼。我个人觉得,其实只要会其中一个就行了,逻辑性的判断还是交给JS去做处理吧,没必要耦合到CSS中去。 […]

  16. 偉大的職位!謝謝

  17. koing 说:

    看不懂,好好学习一下CSS。

  18. andy 说:

    有意思!

  19. 里呗尔 说:

    绝对是干货!!

  20. yousee 说:

    用less除了上述的话还有什么好处好坏处?

    • xiaow 说:

      还有一些没写上,比如less可以动态的获取浏览器宽高,有中文网站和详细的文档等等,这些都是less的优势,准备找机会补上

  21. […] 来自:迅雷CUED 本文标签: CSS,less,重构 本文链接: Css预处理器实践之Sass、Less大比拼 版权所有: 除非注明,文章均为蓝枫博客原创,转载请注明出处及链接! 订阅更新: 您可以 订阅我们 的内容更新或者 分享给更多的朋友 上一篇: 视觉设计:随谈工艺呈现形式对idea的影响 没有了,已经是最新文章了 打印本文 收藏分享 RSS订阅 复制链接 /*640*60,创建于2012-5-13*/ var cpro_id = 'u894725'; […]

发表你的评论