Sass与Compass实战PDF电子书下载

第一部分 认识Sass和Compass 2

第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 44

第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

第三部分 来到生产环境 96

第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 138

第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