图 灵 程 序 设 计 丛 书 .NET系列 Sass and Compass in Action SASS与Compass实战 [美]　Wynn Netherland Nathan Weizenbaum 　　 Chris Eppstein Brandon Mathis　　　　　著 刘炬光　赵锦江　张浩然　译 人民邮电出版社 北　　京 内 容 提 要 本书共分为 10 章，旨在完整介绍两个工具： Sass 和 Compass，从而引领读者通过框架高效地构建样式表， 创建动态页面。本书介绍了 Sass 如何通过选择器嵌套和变量来帮助避免重复，以及通过继承和混合器等特性 更加高效地重用通用样式，减少重复编写工作。学完本书后，你一定能对 Sass 和 Compass 有一个全面的理解。 如果你是 Web 设计师或者前端开发人员，那本书定能让你受益匪浅。 ◆ 著　　　　[美] Wynn Netherland Nathan Weizenbaum 　　　　　　　Chris Eppstein Brandon Mathis 译　　　　刘炬光　赵锦江　张浩然 责任编辑　李松峰 执行编辑　李　静　张　庆　杨　琳 责任印制　焦志炜 ◆ 人民邮电出版社出版发行　　北京市丰台区成寿寺路11号 邮编　100164　　电子邮件　315@ptpress.com.cn 网址　http://www.ptpress.com.cn 北京　　　　　　印刷 ◆ 开本：800×1000　1/16 印张：13 字数：308千字 印数：1 — 4 000册 著作权合同登记号 2014年 6 月第 1 版 2014年 6 月北京第 1 次印刷 图字：01-2014-2244号 定价：49.00元 读者服务热线：(010)51095186转600　印装质量热线：(010)81055316 反盗版热线：(010)81055315 广告经营许可证：京崇工商广字第 0021 号 错误！文档中没有指定样式的文字。 47 1 版权声明 2 3 Original English language edition, entitled Sass and Compass in Action by Wynn Netherland, Nathan Weizenbaum, Chris Eppstein, Brandon Mathis, published by Manning Publications. 178 South Hill Drive, Westampton, NJ 08060 USA. Copyright © 2013 by Manning Publications. Simplified Chinese-language edition copyright ©2014 by Posts & Telecom Press. All rights reserved. 本书中文简体字版由Manning Publications授权人民邮电出版社独家出版。未经出版者书面许 可，不得以任何方式复制或抄袭本书内容。 版权所有，侵权必究。 4 5 6 7 8 9 10 11 2 前 言 献给那些精心打造网页并因他们手中的作品而欣喜不已 的Web开发与设计人员。 前 言 1 1 推荐序一 2 3 回顾一下做过的项目，会发现我们曾经多么忽视CSS！JavaScript有着高大上的设计模式和模 块规范，分布在精心设计过的目录里，而CSS仅仅被简单地堆积在一个文件里。它不重要吗？前 端开发最基本的任务就是还原设计，离不开用CSS实现那些复杂的布局和绚丽的效果（后面还会 提到它在移动Web开发中的重要性）。它简单吗？HttpArchive统计全球Top100网站平均单个页面 CSS达到31 KB，在频繁的迭代中维护它们并不轻松。更不要说众所周知的痛点——浏览器兼容 性。CSS既然如此重要，又不简单，为什么没有像它的小伙伴JavaScript那样得到重视和发展呢？ 种种原因中有一个很明显——它不是语言。CSS开发是基于渲染原理和W3C标准（及事实标 准）来设计规则的，这里边没有算法，没有数据结构，没有逻辑控制。这让习惯语言开发的程序 员无从生成思路。一个好的后端程序员可以很快掌握JavaScript，但面对CSS就会变得茫然无助。 于是便会简单粗暴地把所有代码随意写在一起，所有布局都用float实现。表面上看把问题解决了， 实际上是在到处“埋雷” ，到处补“破窗”。这种慢性后果并没有激发CSS在语言方面更快的发展。 保持简单，复杂的效果让Javascript/Flash去干吧，似乎问题就能回避。但很快移动端的崛起打破 了秩序，先是把Flash宣判了，JavaScript在手机上的性能和能耗成为瓶颈，CSS3则在GPU的作用 下看起来异常完美，于是一下子被推上风囗浪尖。曾经那些尘封的草案又被唤醒。各大浏览器厂 商竞相实现最新特征。炫酷的2D/3D动画效果、高端的FlexBox布局……CSS3一夜之间上了头条。 随着应用的深入，最初的快感很快退去，新的兼容性问题又来了，浏览器的种种bug，闹心的厂 商前缀，刚学到就被废弃的标准……在这种形势下CSS的开发想保持简单也难。 浮华过后，人们开始认真思考如何提高CSS的开发效率和可维护性等工程问题。Sass早在2007 年诞生于“工具控”的Ruby社区，开始服务的对象自然是Ruby工程师，是为了让他们能像写Ruby 那样写CSS。直到推出SCSS这种语法风格，Sass变得更像是CSS的扩展和增强，可以跟原生CSS 混写，很快被前端工程师接纳了。现在在我的项目里，一眼望去都是.scss文件。据我所知，国内 各大互联网公司前端团队的CSS开发也都转向Sass或LESS。如果你是前端工程师或有志成为前端 工程师，非常有必要把这块纳入到自己的技能体系中。 Sass让CSS变成语言，可以像其他语言那样去组织模块、封装、复用代码，让CSS开发看上 去非常有“设计感”。在大规模的网站开发中，Sass的用法变得至关重要。其实任何工具都是双 刃剑，用好事半功倍，反之则有破坏性。比如，写Sass很容易就写出多层嵌套，生成的CSS选择器 就会有很多级，不仅低效，维护上也很头疼，以至于出现BEM这种用法。在代码设计上，继承和 混合器有什么区别，怎么抽象和封装更好，等等这些由用法引申出来问题值得在实践中潜心思考。 4 5 6 7 8 9 10 11 2 推荐序一 在技术社区里经常能看到各种文章介绍Sass的用法或观念或技巧，辨清优劣，吸收精华，前 提是要先对它有系统的了解。虽然也能搜到不少中文资料，但很碎片且质量参差不齐。像我这种 东看点西看点的人，之前着实走过不少弯路。在一次前端标准化交流会（w3ctech）上，正好碰 到李松峰老师，吐槽如今光是引进一些介绍眼下流行的JS库的书，实际上某些JS库虽然流行但在 项目中未必适用。反倒像Sass如此普及而且适用面又广的技术，没有一本中文书。没想到松峰老 师很快就促成本书的引进，并找到锦江（勾三股四）等有丰富开发经验的人翻译。我对本书的出 版充满期待，并相信它一定会把更多人带入CSS的世界。 克军 2014年3月4日 前 言 1 1 推荐序二 2 3 CSS1在1996年提出时，目的是作为一个简单的样式机制，让作者与读者都能为HTML文件添 加或改写样式，但是仅限于字体、颜色、框线、间距等。在当初的建议书①的附录有这句话： 我们不指望CSS会进化成一门程序语言。 这句话在2014年读来，是多么地讽刺。今天如果你不掌握任何一种CSS预处理器，大概都不 好意思说自己是个合格的前端工程师。 当时规划CSS语言的人们认为，每个人都应该可以轻松掌握CSS，所以它不能太复杂，更不 应该有一般程序语言具备的变量、逻辑、函数，等等。但是随着现实需求越来越多，CSS陆续增 添了排版布局、阴影圆角、动画分镜，甚至3D特性，使得CSS网页设计早已不是一件简单的事情。 更何况我们还得面对“一千零一个”浏览器臭虫与兼容问题，以及像是罚写小学生的众多厂商前 缀。撰写CSS成了一种黑魔术，更别提要维护它了。 幸好我们不需要绝望，随着LESS、Sass、Stylus等CSS预处理器的兴起，我们有了另一种选 择。网页设计师与开发者可以“别做重复劳动” （DRY，Don’t Repeat Yourself），撰写CSS也仍然 可以充满乐趣。 Sass 3.0版在2010年5月释出，增添了与CSS兼容的SCSS语法，并且搭配Compass的强大社群 支持，从此迈向了主流道路。笔者在2013年底参加了CSSDevConf，开场Keynote的知名设计师Zoe Gillenwater更建议所有网页设计师都应该开始学习Sass。会场上几乎没有人讲“CSS预处理器” ， 只问： “你的项目用了Sass吗？”时至今日，Chrome与Firefox的开发者工具都已经内建SCSS与LESS 语法的支持。 同样是在2010年，当时我仍然在自己创办的设计公司Handlino服务。每次我遇到设计师朋友 们，都会兴奋地向他们介绍Sass/Compass。只要我稍稍展示变量与图片精灵（第6章）功能，所 有人都立刻想要改用Sass/Compass。但是当他们发现“天啊，这玩意得要会使用命令行”，热情 立刻就被浇熄了：“你别闹了，我不可能学会的！” 那年年底的一个周末，我的同事tka心血来潮，撰写出了一个跨平台的Sass/Compass图形界面 工具，立刻受到大家的欢迎。我们决定将它命名为Compass.app②，将程序开源释出，并且在网络 4 5 6 7 8 9 10 —————————— ① http://www.w3.org/TR/REC-CSS1-961217#appendix-e。 ② http://compass.kkbox.com/。 11 2 推荐序二 上贩卖预先编译好的软件。我们承诺捐出30%获利到Compass指定的慈善机构（Compass是一个慈 善软件），因而获得了Compass作者Chris Eppstein（也是本书作者）的支持。截至去年，我们已经 累积捐出超过15000美元。以一个开源软件来说，这实在是个不可思议的成绩。 Sass已经释出了最新的3.3版，Compass也即将迈向1.0版这个重大的里程碑。很高兴听到 《Sass与Compass实战》即将出版的消息，更感谢李松峰老师与译者群投注的辛苦。相信你也能重 拾撰写CSS的乐趣。 薛良斌，Compass.app & Fire.app开发者 2014年3月15日 前 言 1 1 译者序