使用 LESS 或 Sass 重构 CSS 代码

在 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