使用LESS或Sass重构CSS代码

作者 Werner Schuster 译者 杨晨 发布于 2009年7月28日

领域

架构 & 设计,

语言 & 开发

主题

Ruby on Rails ,

Ruby ,

运行时 ,

CSS ,

DSLs ,

Java ,

标识语言 ,

动态语言 ,

语法 ,

领域专用语言 ,

语言 ,

解析 ,

编程 ,

语言设计

分享到

在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

译者 杨晨 对数据库和搜索引擎有深入了解，尤其擅长经典计算机科学理论，对历史学兴趣浓厚。

相关厂商内容

保持某些系统的高可用性，是一些企业的重中之重，如何设计？

海量数据处理，海量视频分发，架构热点难点，尽在架构师峰会！

相关赞助商

ArchSummit全球架构师峰会报名启动！7折优惠，5月31日截止！

1. 返回顶部

   这个不错……

   发表人 Zhou Codor

   这个不错……

   回复

2. 返回顶部

   Re: 这个不错……

   发表人 Li Ming

   这能很大程度上提高 CSS 代码的可维护性，算是前端开发工程师的福音了吧

   回复

3. 返回顶部

   貌似不错

   发表人 liu super

   貌似不错

   回复