Sass与Compass实战

　　还在用CSS手工编写网页布局？还在用“查找/替换”修改十六进制颜色值？随着项目规模日益增长，组织样式表会令你抓狂。你没有想到，自己把大部分时间都浪费在了这些细枝末节上，哪里还有时间去创新？Sass和Compass将你从这些重复工作中解放出来，引入变量、混合器、选择器嵌套、选择器继承等概念，为标准CSS添加了脚本功能和组件库，帮助Web设计师和开发人员大幅度简化了样式表编辑工作。它们能自动完成很多枯燥乏味的任务，并在页面中添加动态样式，进而快速精准地呈现网页。

　　《Sass与Compass实战》共分为10章，旨在完整介绍两个工具：Sass和Compass，从而引领读者通过框架高效地构建样式表，创建动态页面。《Sass与Compass实战》介绍了Sass如何通过选择器嵌套和变量来帮助避免重复，以及通过继承和混合器等特性更加高效地重用通用样式，减少重复编写工作。学完本书后，你一定能对Sass和Compass有一个全面的理解。
　　如果你是Web设计师或者前端开发人员，那《Sass与Compass实战》定能让你受益匪浅。

　　Wynn Netherland，有近20年的Web从业经历。他主笔和参与撰写过许多Web开发方面的图书。他喜欢在GitHub上工作，经常在行业会议上演讲，并“出没”于开发者聚会，有时候还会在屋后的门廊里弹吉他。

　　Nathan Weizenbaum，毕业于华盛顿大学，专业是计算机科学和哲学，他从Sass诞生之初就是首席开发者。目前，他是谷歌的软件工程师，负责Gmail开发。

　　Chris Eppstein，Compass框架的创建者，Sass核心团队成员。毕业于加州理工学院，软件工程师，有10年以上为硅谷创业公司创建网站和应用程序的经验。痴迷于前端开发，目前在LinkedIn从事前端架构和开发者关系相关的工作。

　　Brandon Mathis， Compass核心团队成员，基于Jekyll的可扩展博客框架Octopress的作者。他目前是MongoHQ的一名设计师。

　　★“本书可以让网页设计师和开发人员从重复劳动中解放出来，体会撰写CSS的乐趣。”
　　——薛良斌，Compass.app & Fire.app开发者

　　★“我对本书的出版充满期待，并相信它一定会把更多人带入CSS的世界。”
　　——张克军，豆瓣前端负责人

　　★“Sass与Compass创建者提供的最重要的一手资料，必读！”
　　——David A. Mosher， DAVEMO Consulting

　　★“本书作者就是那些将CSS转换成了更有趣内容的人。”
　　——Jeroen van Dijk, ADGOJI

　　★“解决现实世界问题的优秀示例。”
　　——Jacob Rohde，Amino

第一部分　认识Sass和Compass
第1章　Sass和Compass让样式表重焕青春　2
1．1　开始学习Sass　3
1．1．1　从CSS到Sass　3
1．1．2　动态思维　4
1．1．3　别做重复劳动　4
1．2　Sass你好：消除样式表冗余　4
1．2．1　通过变量来复用属性值　5
1．2．2　使用嵌套来快速写出多层级的选择器　5
1．2．3　使用混合器来复用一段样式　7
1．2．4　使用选择器继承来避免重复属性　9
1．3　Compass是什么　11
1．3．1　Compass库　11
1．3．2　简单的Compass样式项目　12
1．3．3　社区生态系统　13
1．4　创建一个Compass项目　13
1．5　使用Compass解决真实的CSS问题　14
1．5．1　通过重置来保持样式表现一致　14
1．5．2　不用计算创建布局　17
1．5．3　通过表格辅助器为表格添加更专业的斑马条纹样式　20
1．5．4　CSS3属性无需再写厂商前缀　21
1．6　小结　23

第2章　Sass基础语法　24
2．1　使用变量　25
2．1．1　变量声明　25
2．1．2　变量引用　25
2．1．3　变量名用中划线还是下划线分隔　26
2．2　嵌套CSS规则　27
2．2．1　父选择器的标识符&　28
2．2．2　群组选择器的嵌套　29
2．2．3　子组合选择器和同层组合选择器：>、+和~　30
2．2．4　嵌套属性　30
2．3　导入Sass文件　31
2．3．1　使用Sass部分文件　32
2．3．2　默认变量值　33
2．3．3　嵌套导入　33
2．3．4　原生的CSS导入　34
2．4　静默注释　34
2．5　混合器　35
2．5．1　何时使用混合器　36
2．5．2　混合器中的CSS规则　36
2．5．3　给混合器传参　37
2．5．4　默认参数值　38
2．6　使用选择器继承来精简CSS　38
2．6．1　何时使用继承　39
2．6．2　继承的高级用法　40
2．6．3　继承的工作细节　40
2．6．4　使用继承的最佳实践　41
2．7　小结　42

第二部分　在实战中使用Sass和Compass
第3章　无需计算玩转CSS网格布局　44
3．1　网格布局介绍　44
3．1．1　不使用CSS网格布局或者不使用网格辅助设计　44
3．1．2　网格布局系统或框架及其工作原理　44
3．1．3　使用Sass和Compass进行网格布局　48
3．2　开始使用网格布局　48
3．2．1　术语　48
3．2．2　是否使用网格布局，要语义还是要实用　49
3．2．3　固定的网格布局还是流动的网格布局　49
3．3　使用Blueprint　50
3．3．1　使用原生CSS的Blueprint　51
3．3．2　使用Compass应用Blueprint　52
3．3．3　使用Compass应用无需类名的Blueprint　54
3．4　使用960网格布局系统　55
3．4．1　一个基本的960布局　57
3．4．2　在Compass中使用960网格布局　58
3．5　通过Compass处理垂直韵律　60
3．5．1　确定基线　62
3．5．2　前置和后置留白　65
3．6　小结　65

第4章　有Compass就不再枯燥　66
4．1　一张更好的白纸源自有针对性的样式重置　66
4．1．1　全局样式重置　66
4．1．2　通过有针对性的样式重置进行更多控制　68
4．2　更快更直观的排版工具　69
4．2．1　起锚远航：链接辅助工具　69
4．2．2　创建各种各样的列表　71
4．2．3　用辅助工具征服文字　75
4．3　布局辅助工具　77
4．3．1　粘滞的页脚　77
4．3．2　可伸展元素　78
4．4　小结　79

第5章　通过Compass使用CSS3　80
5．1　什么是CSS3　80
5．1．1　新属性：浏览器前缀让你烦透了吧　80
5．1．2　让Compass拯救你　81
5．2　通过Compass使用CSS3　82
5．2．1　圆角　82
5．2．2　CSS3阴影　83
5．2．3　颜色渐变　88
5．2．4　用@font-face嵌入字体　90
5．3　通过CSS PIE支持IE　91
5．4　小结　94

第三部分　来到生产环境
第6章　精灵　96
6．1　精灵的工作原理　96
6．2　精灵的必要性　97
6．2．1　HTTP请求越少越好　98
6．2．2　手动处理是一种折磨　98
6．2．3　Compass的方案　99
6．3　用Compass制作精灵　100
6．3．1　创建一个精灵地图　100
6．3．2　生成精灵的CSS　101
6．4　配置Compass精灵　103
6．4．1　自定义精灵地图　103
6．4．2　自定义精灵的CSS　106
6．5　驾驭精灵辅助器　109
6．5．1　创建精灵地图　109
6．5．2　撰写精灵的CSS　110
6．6　小结　112

第7章　从原型到产品　113
7．1　绝对URL　114
7．1．1　生成URL资源　114
7．1．2　避免出现死链　115
7．1．3　通过缓存清理避免旧图片　116
7．2　用Sass和Compass做原型　117
7．2．1　简化你的开发环境　118
7．2．2　直接在浏览器里设计　119
7．3　发布成产品　120
7．3．1　想不到吧！该挪窝了　120
7．3．2　为生产环境编译　120
7．3．3　生成相对于域名的资源　121
7．3．4　添加版权提示　122
7．3．5　发布CSS很简单　122
7．3．6　跟源码控制、发布流程配合在一起　123
7．3．7　和预发服务器一起工作　124
7．4　小结　125

第8章　高性能式样表　126
8．1　测量客户端性能　126
8．2　回避带有服务器端@import的HTTP请求　128
8．3　用压缩减少传输时间　130
8．3．1　gzip压缩　130
8．3．2　图片压缩　131
8．4　用资源托管提高页面加载速度　131
8．4．1　使用资源托管生成URL　132
8．4．2　避免内容警告和基于域的资源相混合　132
8．5　内联data URI　133
8．6　选择器性能　134
8．6．1　积少成多的问题　135
8．6．2　过分嵌套的危险　135
8．7　小结　136

第四部分　高级Sass和Compass
第9章　用Sass编写脚本　138
9．1　使用表达式　139
9．2　理解数据类型　139
9．2．1　字符串和名字　140
9．2．2　数值　141
9．2．3　颜色　142
9．2．4　列表　142
9．2．5　布尔值　143
9．3　函数　143
9．3．1　数值函数　144
9．3．2　颜色函数　145
9．3．3　列表函数　147
9．3．4　其他Sass函数　147
9．3．5　用户自定义函数　147
9．4　在选择器和属性名中使用表达式　148
9．5　控制指令　149
9．5．1　对数字重复样式　150
9．5．2　对列表重复样式　150
9．5．3　条件样式　151
9．6　小结　152

第10章　创建并分享一个Compass扩展　153
10．1　分享和重用样式表　153
10．1．1　Sass比CSS更容易分享　153
10．1．2　分享Sass　154
10．1．3　分享Sass是远远不够的　155
10．1．4　为什么使用Compass扩展　155
10．2　一个简单的扩展　155
10．2．1　安装ad hoc扩展　156
10．2．2　测试你的扩展　156
10．3　创建扩展演示项目　157
10．4　编写高级扩展　159
10．4．1　自动化完成困难的部分　160
10．4．2　重构你的扩展　164
10．5　创建一个模板　167
10．6　分发扩展　169
10．6．1　在存档中分发扩展　169
10．6．2　将扩展作为Ruby gem分发　169
10．6．3　在Github上进行代码社交　172
10．7　小结　173

附录A　安装Sass和Compass　174
附录B　开始使用Compass　179
附录C　Sass语法　185

　　推荐序
　　回顾一下做过的项目，会发现我们曾经多么忽视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这种用法。在代码设计上，继承和混合器有什么区别，怎么抽象和封装更好，等等这些由用法引申出来问题值得在实践中潜心思考。
　　在技术社区里经常能看到各种文章介绍Sass的用法或观念或技巧，辨清优劣，吸收精华，前提是要先对它有系统的了解。虽然也能搜到不少中文资料，但很碎片且质量参差不齐。像我这种东看点西看点的人，之前着实走过不少弯路。在一次前端标准化交流会（w3ctech）上，正好碰到李松峰老师，吐槽如今光是引进一些介绍眼下流行的JS库的书，实际上某些JS库虽然流行但在项目中未必适用。反倒像Sass如此普及而且适用面又广的技术，没有一本中文书。没想到松峰老师很快就促成本书的引进，并找到锦江（勾三股四）等有丰富开发经验的人翻译。我对本书的出版充满期待，并相信它一定会把更多人带入CSS的世界。
　　克军
　　2014年3月4日