内容介绍
这本书是使用这两个革命性工具创建样式表的权威指南内容循序渐进,例题结合实战。这四位作者都是Sass和Compass的核心团队成员(及创建者),向读者展示了高效使用这两个框架的本质。
适合所有网页设计师、前端开发人员、Web应用程序经理和相关人员阅读。
目录
- 第一部分 认识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
把sass和compass实战这本书看完了,系统的将sass学习了一遍,之前在两个其他项目中使用了sass,但是造成了选择器的性能低,代码冗余。这本书很好的解决了这个问题。另外,compass常用的几个include也讲得很清楚
整体来说,翻译还行,不过年代有点老了,compass 已经不维护了,sass就用sass吧,libsass,值得拥有。
读完了,工具书只读一遍不太有安全感,估计还会再看,整体看大型项目比较适合,小型项目用这个有点多余,而且从设计角度看有些便捷调整可用性不大,外加css3的浏览器兼容还不够好,还有很多性能的限制,精灵图片看下来可用性很高