使用 LESS 或 Sass 重构 CSS 代码

作者

    <strong><a class="editorlink" href="http://www.infoq.com/cn/bycategory.action?authorName=Werner-Schuster" class="editorlink">

Werner Schuster

    	译者
    	<strong><a class="editorlink" href="http://www.infoq.com/cn/bycategory.action?authorName=%E6%9D%A8%E6%99%A8" class="editorlink">

杨晨

    发布于
    2009年7月28日 上午5时56分
</p>

在Web开发中，CSS的使用是非常普遍的，但滥用的情况也是屡见不鲜。LESS 和Sass 都是用Ruby实现的工具，可以帮助开发者写出复用性更优的CSS文件。它们的方法基本类似：将类似CSS但是更为强大的输入语言，最终转换为CSS代码。

两种语言给CSS添加的特性都是相似的，具体参见LESS 和Sass 的文档。下面是一个简略的概述：

变量： LESS中的@name 和Sass中的!name 都是变量。我们可以给变量赋值，然后在文件中使用它们。
内嵌：这个功能将另外一个急需的特性加入CSS：将选择器嵌入到其他等级，而不是不得不取消在一些高级选择器定义中嵌套。LESS和Sass翻译器将这个简洁的特性扩展到了CSS。
混合类型 ：允许开发者抽象出性质的共同点，然后命名并且加入到选择器中。熟悉Ruby混合类型的开发者会了解混合类型在CSS中的应用。Sass也允许将混合类型作为参数，使得混合类型的应用更加灵活。
操作：LESS和Sass都支持简单的算术操作，例如加法。将这个特性和变量结合起来，会使得CSS变得更加灵活。这两个工具需要保证操作的正确性（例如字体大小）。

Sass 是由Haml 的团队开发的。它采用了Haml的思想，使用缩进而不是括号这样的分隔符来定义代码块或者内嵌级别。

Sass的解析器和翻译器将Sass语言翻译成CSS，并且用变量值替换文件中变量的引用以及混合类型等等。

LESS 是受Sass启发而开发的工具，它列出了如下开发的理由：

为什么要开发一个Sass的替代品呢？原因很简单：首先是语法。Sass的一个关键特性是缩进式的语法，这种语法可以产生柱式外观的代码。但是你需要花费时间学习一门新的语法以及重新构建你现在的样式表。

LESS给CSS带来了很多特性，使得LESS能够和CSS无缝地紧密结合在一起。因此，你可以平滑地由CSS迁移到LESS，如果你只是对使用变量或者操作感兴趣的话，你不需要学习一整门全新的语言。

LESS的解析器是使用TreeTop 编写的，TreeTop是一个Ruby编写的PEG解析器的生成器（LESS TreeTop语法）。

LESS和Sass工具（编译器和API）能够作为Gems安装，使用命令行工具进行编译，但是也可以在Ruby代码中使用。

Sass看起来在提供的特性上占有优势，但是LESS能够让开发者平滑地从现存CSS文件过渡到LESS，而不需要像Sass那样需要将CSS文件转换成Sass格式。Sass的维护者Nathan Weizenbaum在一篇对比LESS和Sass的博文中提到，未来Sass将会提供括号，而不是像CSS或者LESS那样的缩进。

查看英文原文： DRYer CSS with LESS or Sass

欢迎注册黑客派社区，开启你的博客之旅。让学习和分享成为一种习惯！