Sass和Compass设计师指南PDF电子书下载

引言 1

第1章 Sass和Compass概述 7

1.1为什么需要CSS预处理器 8

如果最终生成的是CSS代码，为什么不干脆写CSS 9

1.2为什么应该用Sass和Compass 9

使用变量（每个值只需要定义一次） 10

自动转换的RGBA颜色值 11

忘记浏览器前缀 12

嵌套规则 12

media quenes变得更加简单 13

自动压缩CSS从而实现快速建站 15

1.3什么是Sass 15

1.4什么是Compass 17

1.5安装Sass和Compass 17

OSX系统安装方法 18

1.6通过命令行安装和使用Sass和Compass 19

在Windows下安装Ruby 19

运行gem命令 19

Mac OS X命令行安装 20

Windows命令行安装 21

检查你的Sass和Compass版本 22

检查有哪些Sass和Compass版本可用 23

安装最新版本的Sass和Compass（包括预发布版本） 23

从命令行创建Sass和Compass工程 24

命令行自动编译功能 26

1.7使用图形界面工具运行Sass和Compass 26

Scout应用 27

CodeKit 27

LiveReload 28

1.8在文本编辑器下使用Sass文件 30

1.9总结 31

第2章 创建Sass和Compass工程 33

2.1创建Sass和Compass工程 34

创建Compass工程 35

2.2理解config.rb文件 38

添加需要的插件 40

为工程资源设定名称和路径 40

设定CSS输出样式 41

2.3创建和使用模块文件 45

Sass提供可维护的生产性代码 46

导入模块文件 48

Sass中书写变量的语法 49

2.4 Sass注释格式 50

标准CSS注释 50

Sass单行注释 50

2.5基础的mdex.html文件 51

2.6未来工程的基础构架 52

2.7总结 53

第3章 嵌套、扩展、占位符和混合宏 55

3.1用Sass和Compass给网站添加样式 55

3.2从视觉上分割布局 57

3.3什么是嵌套？它是如何实现代码模块化的？ 60

嵌套语法 60

使用父级选择器轻松添加Modernizr样式 66

嵌套命名空间 72

3.4使用@extend命令扩展现有代码 75

3.5使用占位符选择器来扩展需要的样式 77

3.6什么是混合宏？如何使用混合宏来轻松生成常用代码？ 78

混合宏的基本语法 80

如何用默认值写混合宏 82

3.7生成CSS的注意事项 85

3.8总结 86

第4章 轻松玩转颜色 87

4.1只定义一次颜色 88

4.2变浅和加深函数 89

掌握HSL颜色标准 90

变浅函数和加深函数语法 91

4.3标签修改和转换 92

Compass的clearfix功能 93

4.4再谈颜色 95

混合宏里还有混合宏？这是什么新功能？ 97

4.5互补（和反色）函数 101

4.6反色函数 102

4.7色调调节函数 102

4.8饱和函数和去饱和函数 103

4.9透明化函数和渐隐函数 105

4.10不透明化函数和渐现函数 106

4.11灰度函数 106

4.12 rgba函数 107

4.13混合函数 108

4.14调色函数 109

4.15 比例调色函数 110

4.16遮阴函数和增亮函数 112

4.17综合应用 113

4.18总结 114

第5章 Sass和Compass的响应式弹性网格系统 115

5.1反对使用网格系统的各种说法 116

5.2为什么使用网格系统 117

5.3什么是Susy 117

Susy到底是做什么的 118

5.4安装SusyCompass插件 119

5.5在工程中引入Susy 120

Susy工程变量 120

5.6创建Susy网格系统 121

5.7为网格系统定义背景 122

显示网格背景 123

给Susy设置border-box属性 124

5.8创建“移动”响应式网格系统 125

5.9用Susy创建断点 125

5.10创建流体网格系统 131

5.11创建静态的“固定化”网格系统 132

5.12使用Susy网格帮助工具 132

Prefix、Suffix和Pad 133

Prefix 133

Suffix 134

Pad 135

5.13 Pre、Post、Squish、Push和Pull 136

Pre 136

Post 137

Squish 137

Push和Pull 137

5.14网格内嵌套网格 138

nth-omega混合宏 139

5.15子像素的四舍五入问题 142

为什么会发生像素取整错误 143

容器相对布局 143

标准Susy语法及输出 143

5.16总结 146

第6章 Sass和混合宏中的高级media queries 147

6.1 Sass中的media queries 148

使用media query模块文件分离media query样式 149

6.2 Sass的行内media queries 149

6.3创建混合宏轻松处理media queries 151

将断点定义为变量 151

6.4 MQ media query混合宏是如何工作的 153

6.5各种情况的应用 154

6.6书写行内media queries 155

6.7 gzip和CSS压缩=胜利！ 160

6.8实际工程中行内media queries和集合media queries的区别 161

6.9复习CSS代码 163

6.10总结 165

第7章 Compass中的CSS3、Image Sprites等功能 167

7.1用Compass混合宏轻松实现CSS3 168

文本阴影属性的语法 168

7.2 border-radius语法 170

7.3复列 171

分列规则语法 172

盒子阴影混合宏 173

盒子阴影语法 173

多重盒子阴影 174

7.4背景渐变 176

背景线性渐变语法 176

背景辐射渐变语法 178

组合渐变和背景图像 178

7.5用Compass image-url帮助工具添加背景图像 179

7.6图像宽度和高度帮助工具 180

Compass缓存消除功能 181

7.7 Compass的image sprites功能 182

其他sprite配置选项 185

布局选项 186

7.8 Compass文本替代混合宏 186

hide-text混合宏 186

文本压缩混合宏 187

用图像代替文本 188

7.9为图像创建数据URI 189

行内图像语法 191

7.10不支持SVG格式设备的备选方法 192

7.11 CSS变形功能 193

7.12 CSS过滤器 196

7.13过渡 197

7.14总结 198

第8章 Sass的编程逻辑 199

8.1 Sass的数学计算 200

加法 200

减法 200

乘法 201

除法 201

使用变量进行计算 203

8.2控制命令及使用方法 203

@if@else if制命令 204

@for循环 205

计数器变量 207

ftom to和from through 207

@each循环 209

8.3给数值去除和添加单位 213

从数值上去除单位 213

给变量值添加单位 213

8.4在Sass中写函数 214

相等操作符 215

关系操作符 215

@retum 216

使用函数的返回结果 216

8.5使用@debug命令 216

8.6@wam命令 219

8.7总结 219

第9章 精通Sass和Compass 221

9.1关闭特定浏览器的Compass支持功能 222

配置支持变量 223

基于WebKit内核的Opera 225

9.2为最新发布的CSS属性提供支持 225

9.3定义最新的CSS3属性值 227

9.4 Sass交互式shell 228

Compass交互 229

9.5添加Sass globbing插件来批量导入模块文件 229

9.6创建多个独立的样式表 230

9.7将模块文件转换为独立的样式表 231

9.8 Compass统计 231

9.9清空Sass缓存 233

9.10一次性Compass编译 234

9.11任务回顾 234

修正人为错误 234

使用Lint工具发现常见问题 236

9.12用工具和测试避免主观推断 237

Chrome开发者工具 237

查找没被使用的样式 240

9.13循序渐进 242

9.14总结 243

索引 245