CSS教程:预处理器的Sass和less进行对比

文章类别：div+css | 发表日期:2012-7-9 10:08:37

CSS教程:预处理器的Sass和less进行对比

逻辑/循环
    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上面是值得的。

上一篇：{实例}CSS教程：百度首页模拟代码 人气:2026
下一篇：{教程}CSS教程:CSS预处理器的介绍 人气:2034

div+css视频教程