BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

使用LESS或Sass重构CSS代码

| 作者 Werner Schuster 关注 7 他的粉丝 ,译者 杨晨 关注 0 他的粉丝 发布于 2009年7月29日. 估计阅读时间: 3 分钟 | QCon上海2018 关注大数据平台技术选型、搭建、系统迁移和优化的经验。

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

两种语言给CSS添加的特性都是相似的,具体参见LESSSass的文档。下面是一个简略的概述:

  • 变量: 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

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

这个不错…… by Zhou Codor

这个不错……

Re: 这个不错…… by Li Ming

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

貌似不错 by 随随 米

貌似不错

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

3 讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT