Sass和Compass设计师指南

Ben Frain是具有十多年经验的网页设计师和前端工程师，直接与世界各地的客户和设计机构并肩工作。同时他还是一名技术记者，定期为一些关注Mac平台、前沿科技、网页设计和航空技术的刊物撰稿。 在此之前，他曾是一名怀才不遇的（而且谦虚谨慎的）电视演员，毕业于索尔福德大学的媒体与表演专业。他写了四部（自认为）被低估的剧本，而且始终心怀能卖出一部的信念（尽管不像最初那么强烈了）。 工作之余，在身体（和妻子）允许的情况下，他喜欢玩室内足球。 他的个人网站是www.benfrain.com，他的Twitter是twitter.com/benfrain。

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

第1章 Sass和Compass概述 7 11 为什么需要CSS预处理器 8 111 如果最终生成的是CSS代码，为什么不干脆手写CSS？ 9 12 为什么应该用Sass和Compass 9 121 使用变量（每个属性值只需要定义一次） 10 理解变量语法 10 122 自动转换的RGBA颜色值 11 123 忘记浏览器前缀 12 124 嵌套规则 12 125 Media queries变得更加简单 13 126 自动压缩CSS从而实现快速建站 15 13 什么是Sass 15 14 什么是Compass 17 15 安装Sass和Compass 17 151 OS X系统安装方法 18 16 通过命令行安装和使用Sass和Compass 19 161 在Windows下安装Ruby 19 162 运行gem命令 19 163 Mac OS X命令安装 20 164 Windows命令行安装 21 165 检查你的Sass和Compass版本 22 166 检查有哪些Sass和Compass版本可用 23 167 安装最新版本的Sass和Compass（包括预发布版本） 23 168 从命令行创建Sass和Compass工程 24 169 命令行自动编译功能 26 17 使用图形界面软件运行Sass 和 Compass 26 171 Scout app 27 172 CodeKit 27 173 LiveReload 28 18 在文本编辑器下使用Sass文件 30 19 小结 31 第2章 创建Sass和Compass工程 33 21 创建Sass和Compass工程 34 211 创建Compass工程 35 创建定制化的Compass工程36 创建空的Compass工程37 22 理解configrb文件 38 221 添加需要的插件 40 222 为工程资源设定名称和路径 40 223 设定CSS输出样式 41 嵌套输出选项 41 紧密输出方式 42 压缩输出方式 43 去掉注释，保持样式 43 压缩CSS，保持注释（凸显注释） 44 打开相对资源路径功能 44 23 创建和使用模块文件 45 231 Sass提供可维护的生产性代码 46 232 导入模块文件 48 233 Sass中书写变量的语法 49 24 Sass注释格式 50 241 标准CSS注释 50 242 Sass单行注释 50 25 基础的indexhtml文件51 26 未来工程的基础构架 52 27 总结 53 第3章 嵌套，扩展，占位符和混合宏 55 31 用Sass和Compass给网站添加样式 55 目录 9 32 从视觉上分割布局 57 33 什么是嵌套？它是如何实现代码模块化的？ 60 331 嵌套语法 60 父级选择器 64 级联选择器 65 332 使用父级选择器轻松添加Modernizr样式 66 给字体定义一个模块文件 67 用Modernizr和父级选择器改变字体 68 过度嵌套的危险 69 ID选择器不好？ 71 333 嵌套命名空间 72 34 使用@extend命令扩展现有代码 75 35 使用占位符选择器来扩展需要的样式 77 36 什么是混合宏？如何使用混合宏来轻松生成常用代码？ 78 361 混合宏的基本语法 80 362 如何用默认值写混合宏 82 37 生成CSS的注意事项 85 38 总结 86 第4章 轻松玩转颜色 87 41 只定义一次颜色 88 42 变浅和加深函数 89 421 掌握HSL颜色标准 90 422 变浅和加深函数语法 91 43 标签修改和转换 92 431 Compass的clearfix功能 93 44 再谈颜色 95 441 混合宏里还有混合宏？这是什么新功能？ 97 45 互补（和反色）函数 101 46 反色函数 102 47 色调调节函数 102 48 饱和函数和去饱和函数 103 49 透明化函数和渐隐函数 105 410 不透明化函数和渐现函数 106 411 灰度函数 106 412 rgba函数 107 413 混合函数 108 414 调色函数 109 415 比例调色函数 110 416 遮阴函数和增亮函数 112 417 综合利用函数 113 418 总结 114 第5章 Sass和Compass的响应式弹性网格系统 115 51 反对使用网格系统的各种说法 116 52 为什么使用网格系统 117 53 什么是Susy? 117 531 Susy到底是做什么的？ 118 54 安装Susy Compass插件 119 55 在工程中引入Susy 120 551 Susy工程变量 120 56 创建Susy网格系统 121 57 为网格系统定义背景 122 571 显示网格背景 123 572 给Susy设置border-box属性 124 58 创建“移动”响应式网格系统 125 59 用Susy创建断点 125 510 创建流体网格系统 131 511 创建静态的“固定化”网格系统 132 512 使用Susy网格帮助工具 132 5121 Prefix、Suffix和Pad 133 5122 Prefix 133 5123 Suffix 134 5124 Pad 135 513 Pre, Post, Squish, Push和Pull 136 5131 Pre 136 5132 Post 137 5133 Squish 137 5134 Push和Pull 137 514 网格内嵌套网格 138 5141 nth-omega混合宏 139 515 子像素的四舍五入问题 142 目录 11 5151 为什么会发生像素取整错误 143 5152 容器相对布局 143 5153 标准Susy语法及输出 143 分格混合宏 144 516 总结 146 第6章 Sass和混合宏中的高级media queries 147 61 Sass中的Media queries 148 611 使用media query模块文件分离media query样式 149 62 Sass的行内media queries 149 63 创建混合宏轻松处理media queries 151 631 将断点定义为变量 151 64 MQ media query混合宏是如何工作的 153 65 各种情况的应用 154 66 书写行内media queries 155 67 gzip和CSS压缩=胜利！ 160 68 实际工程中行内media queries和集合media queries的区别 161 69 复习CSS代码 163 610 总结 165 第7章 Compass中的CSS3、Image Sprites等功能 167 71 用Compass混合宏轻松实现CSS3 168 711 文本阴影属性的语法 168 使用默认值的文本阴影 169 72 border-radius语法 170 73 复列 171 731 分列规则语法 172 732 盒子阴影混合宏 173 733 盒子阴影语法 173 734 多重盒子阴影 174 74 背景渐变 176 741 背景线性渐变语法 176 742 背景辐射渐变语法 178 743 组合渐变和背景图像 178 75 用Compass image-url帮助工具添加背景图像179 76 图像宽度和高度帮助工具 180 761 Compass缓存消除功能 181 77 Compass的image sprites功能 182 771 其他sprite配置选项 185 为每个HTML选择器添加高度和宽度 185 给图像周围添加额外的内边距 185 772 布局选项 186 78 Compass文本替代混合宏 186 781 文本隐藏混合宏 186 782 Squish-text混合宏 187 783 用图像代替文本 188 79 为图像创建数据URI 189 791 行内图像语法 191 710 不支持SVG格式设备的备选方法 192 711 CSS变形功能 193 712 CSS过滤器 196 713 过渡 197 714 总结 198 第8章 Sass的编程逻辑 199 81 Sass的数学计算 200 811 加法 200 812 减法 200 713 乘法 201 814 除法 201 815 使用变量进行计算 203 82 控制命令及使用方法 203 821 @if和@else if控制命令 204 822 @for循环 205 823 计数器变量 207 824 from to和from through 207 插入功能 208 825 @each循环 209 83 给数值去除和添加单位 213 831 从数值上去除单位 213 832 给变量值添加单位 213 84 在Sass中写函数 214 841 相等操作符 215 842 关系操作符 215 843 @return 216 844 使用函数的返回结果 216 85 使用@debug命令 216 86 @warn命令 219 87 总结 219 第9章 精通Sass和Compass 221 91 关闭指定浏览器的Compass支持功能 222 911 配置支持变量 223 912 基于WebKit内核的Opera 225 92 为最新发布的CSS属性提供支持 225 93 定义最新属性值 227 94 Sass交互式shell 228 941 Compass交互 229 95 添加Sass globbing插件来批量导入模块文件 229 96 创建多个独立的样式表 230 97 将模块文件转换为独立的样式表 231 98 Compass统计 231 99 清空Sass缓存 233 910 一次性Compass编译 234 911 小结 234 9111 修正人为错误 234 9112 使用Lint工具发现常见问题 236 912 用工具和测试避免推断 237 9121 Chrome开发者工具 237 持续页面刷新 238 9122 查找没被使用的样式 240 913 循序渐进 242 914 总结 243