Sass和Compass设计师指南_前端开发教程

资源名称：Sass和Compass设计师指南

内容简介：

本书是《响应式Web设计：HTML5和CSS3实战》作者Ben Frain的又一力作。作者通过丰富、完整的案例，循序渐进地展示了Sass和Compass的使用方法。既使不懂编程的设计师读完本书也能轻松生成跨浏览器的、易于维护的CSS代码，并学会编写media query代码，进行响应式设计。本书适合交互设计师、UI设计师、网页设计师、前端开发工程师阅读。

资源目录：

第1章 Sass和Compass概述 

11 为什么需要CSS预处理器 

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

12 为什么应该用Sass和Compass 

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

理解变量语法 

122 自动转换的RGBA颜色值 

123 忘记浏览器前缀 

124 嵌套规则 

125 Media queries变得更加简单 

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

13 什么是Sass 

14 什么是Compass 

15 安装Sass和Compass 

151 OS X系统安装方法 

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

161 在Windows下安装Ruby 

162 运行gem命令 

163 Mac OS X命令安装 

164 Windows命令行安装 

165 检查你的Sass和Compass版本 

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

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

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

169 命令行自动编译功能 

17 使用图形界面软件运行Sass 和 Compass 

171 Scout app 

172 CodeKit 

173 LiveReload 

18 在文本编辑器下使用Sass文件 

19 小结 

第2章 创建Sass和Compass工程 

21 创建Sass和Compass工程 

211 创建Compass工程 

创建定制化的Compass工程

创建空的Compass工程

22 理解con?grb文件 

221 添加需要的插件 

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

223 设定CSS输出样式 

嵌套输出选项 

紧密输出方式 

压缩输出方式 

去掉注释，保持样式 

压缩CSS，保持注释（凸显注释） 

打开相对资源路径功能 

23 创建和使用模块文件 

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

232 导入模块文件 

233 Sass中书写变量的语法 

24 Sass注释格式 

241 标准CSS注释 

242 Sass单行注释 

25 基础的indexhtml文件

26 未来工程的基础构架 

27 总结 

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

31 用Sass和Compass给网站添加样式 

目录 

32 从视觉上分割布局 

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

331 嵌套语法 

父级选择器 

级联选择器 

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

给字体定义一个模块文件 

用Modernizr和父级选择器改变字体 

过度嵌套的危险 

ID选择器不好？ 

333 嵌套命名空间 

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

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

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

361 混合宏的基本语法 

362 如何用默认值写混合宏 

37 生成CSS的注意事项 

38 总结 

第4章 轻松玩转颜色 

41 只定义一次颜色 

42 变浅和加深函数 

421 掌握HSL颜色标准 

422 变浅和加深函数语法 

43 标签修改和转换 

431 Compass的clear?x功能 

44 再谈颜色 

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

45 互补（和反色）函数 

46 反色函数 

47 色调调节函数 

48 饱和函数和去饱和函数 

49 透明化函数和渐隐函数 

410 不透明化函数和渐现函数 

411 灰度函数 

412 rgba函数 

413 混合函数 

414 调色函数 

415 比例调色函数 

416 遮阴函数和增亮函数 

417 综合利用函数 

418 总结 

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

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

52 为什么使用网格系统 

53 什么是Susy? 

531 Susy到底是做什么的？ 

54 安装Susy Compass插件 

55 在工程中引入Susy 

551 Susy工程变量 

56 创建Susy网格系统 

57 为网格系统定义背景 

571 显示网格背景 

572 给Susy设置border-box属性 

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

59 用Susy创建断点 

510 创建流体网格系统 

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

512 使用Susy网格帮助工具 

5121 Pre?x、Suf?x和Pad 

5122 Pre?x 

5123 Suf?x 

5124 Pad 

513 Pre, Post, Squish, Push和Pull 

5131 Pre 

5132 Post 

5133 Squish 

5134 Push和Pull 

514 网格内嵌套网格 

5141 nth-omega混合宏 

515 子像素的四舍五入问题 

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

5152 容器相对布局 

5153 标准Susy语法及输出 

分格混合宏 

516 总结 

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

61 Sass中的Media queries 

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

62 Sass的行内media queries 

63 创建混合宏轻松处理media queries 

631 将断点定义为变量 

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

65 各种情况的应用 

66 书写行内media queries 

67 gzip和CSS压缩=胜利！ 

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

69 复习CSS代码 

610 总结 

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

7