低代码到底是不是行业毒瘤?一线大厂怎么做的?戳此了解>>> 了解详情
写点什么

使用 LESS 或 Sass 重构 CSS 代码

2009 年 7 月 28 日

在 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

2009 年 7 月 28 日 05:565607
用户头像

发布了 90 篇内容, 共 28.4 次阅读, 收获喜欢 1 次。

关注

评论

发布
暂无评论
发现更多内容

产品 0 期 - 第三周作业

Jxin

开发质量提升系列:标准模板(上)

罗小龙

方法论 28天写作

产品 0 期 - 第三周作业

vipyinzhiwei

欢度春节|话题王者 VS 互动先锋(第二季)

InfoQ写作平台官方

话题讨论 活动专区

图解类加载器和双亲委派机制,一看就懂

Java鱼仔

Java 程序员 面试 类加载

2021年,开发者的落日

王知无

大数据

Apache老母鸡又下蛋?一文俯瞰Apache Superset

王知无

大数据

区块链技术发展及应用:现状与挑战

CECBC区块链专委会

区块链

webpack | 进阶用法1:多入口构建/资源内联/脚本分离等

梁龙先森

前端工程 webpack 28天写作

Elasticsearch document routing 数据路由

escray

elastic 七日更 28天写作 死磕Elasticsearch 60天通过Elastic认证考试

Spring 动态代理时是如何解决循环依赖的?为什么要使用三级缓存?

程序员小航

spring 源码

用helm chart将chripstack部署到kubernetes之上

LanLiang

Kubernetes IoT Helm ChirpStack LoraWan

架构入门感悟总结

莫问

前端工程师的一大神器——puppeteer

执鸢者

前端 Node puppeteer

读2020年Javascript趋势报告展望ES2020

devpoint

ES2020 构建工具 前端构建

2月日更挑战|达标抽奖季,更有暖春大满足礼包等你来

InfoQ写作平台官方

活动专区 2月春节不断更

95 后张勇:Apache Pulsar Committer 军团新生代力量

Apache Pulsar

大数据 开源 pulsar Apache Pulsar 消息系统

第十周 模块分解 作业 「架构师训练营 3 期」

feiyun123

第十周课后练习

Binary

架构师训练营 - 第五周作业

Mark

使用 Tye 辅助开发 k8s 应用竟如此简单(一)

newbe36524

Docker 微服务 k8s dotnet

区块链隐私保护、体系结构与智能合约研究

CECBC区块链专委会

区块链

航运业“搭台” 区块链“唱戏”

CECBC区块链专委会

航运

VS +QT 手动添加Q_OBJECT 报错问题解决

Creep

c++ qt

企业是如何解决HDFS单点问题的?

大数据老哥

大数据 hadoop

关于微信8.0的一些社交小心思

静陌

微信 张小龙 社交

《程序员修炼之道》- 解决问题,而不是去责备(6)

石云升

bug修复 28天写作 程序员修炼之道

批判性思维自修课(五)

石君

28天写作 批判性思维

我看好数据湖的未来,但不看好数据湖的现在

王知无

大数据 数据湖

聊聊我的原创维权二三事

架构精进之路

自我思考 七日更 28天写作

Spring Security进阶:OAuth2.0详解

Java王路飞

Java spring 面试 springsecurity WEB安全

2021 ThoughtWorks 技术雷达峰会

2021 ThoughtWorks 技术雷达峰会

使用LESS或Sass重构CSS代码-InfoQ