深入PostCSS Web设计

PostCSS是目前CSS处理器中很流行的一个处理器。PostCSS依托其强大的插件生态系统，为CSS处理器增加了无穷的可能性。本书共十四章内容，包括介绍PostCSS，创建变量和混合宏，嵌套规则，创建媒体查询，管理颜色、图片和字体，创建网格，动画元素，PostCSS插件开发，简写型插件、降级插件和包型插件，定制处理器，管理自定义语法，混合处理器，排除、解决PostCSS的相关问题，为未来做准备。以上内容将带你深入了解PostCSS以及如何使用PostCSS。如果你还没有准备好去了解PostCSS能做什么，那么，请跟着这本书的步骤进行系统而深入的学习，你将进入到CSS的全新世界。

Alex Libby从事IT支持工作，有近20年的多领域终端用户支持经验，目前在英国的一家优选经销商担任MVT测试开发者。虽然Alex的日常工作是和各种技术打交道，但他很关注的还是开源社区的动向，尤其是CSS/CSS3、jQuery和HTML5等技术。到目前为止，Alex已经通过Packt出版了10本技术书籍并参与了多本书籍的审校工作，涉及jQuery、HTML5视频、Sass和CSS等技术，《深入PostCSS Web设计》是Alex通过Packt出版的靠前1本书。
廖伟华，常用昵称“大漠”，W3CPlus创始人，目前就职于淘宝。对HTML5、CSS和CSS处理器等前端脚本语言有很好深入的认识和丰富的实践经验，专注于CSS、CSS处理器和Web Animation技术的研究，是靠前很早研究和使用CSS3和CSS处理器技术的一批人。CSS3、Sass和Drupal的中国布道者。2014年出版著作《图解CSS3：核心技术与案例实战》。

1PostCSS简介 1
编译之美 2
PostCSS介绍 2
PostCSS的优势 3
PostCSS的陷阱 4
消除误解 5
准备工作 5
搭建开发环境 6
安装PostCSS 8
使用PostCSS创建一个简单的示例 10
添加Source Map功能 11
压缩样式 13
自动化编译 15
代码审查 16
PostCSS工作机制 20
从Sass迁移到PostCSS 21
小结 22
2创建变量和混合宏 23
变量和混合宏简介 23
设置Sass 24
创建悬停效果示例 27
使用LESS编辑CSS 29
过渡到PostCSS 29
添加PostCSS变量支持 29
更新悬停效果示例 30
进一步思考 33
设置插件顺序 35
使用PostCSS创建混合宏 36
更新我们的悬浮效果示例 37
PostCSS与标准处理器的比较 39
使用PostCSS循环内容 41
使用@each语句进行遍历 43
切换到使用PostCSS 46
小结 47
3嵌套规则 49
嵌套简介 49
页面导航 51
示例的准备工作 52
从现有处理器进行转换 52
使用PostCSS插件进行过渡 53
将示例转换成PostCSS生产模式 54
代码编译 56
探索嵌套陷阱 57
采取更好的方式 60
重新审视我们的代码 63
更新代码 64
切换到BEM 65
创建一个简单的消息盒 67
编译并修正代码 70
安装BEM支持 70
探索更多变化的细节 74
修复错误 75
小结 77
4创建媒体查询 78
重温媒体查询 78
探索PostCSS自定义媒体查询 79
从普通CSS开始 81
使用PostCSS修改案例 82
创建响应式图片 84
使用PostCSS创建响应式图片 85
响应式图片的实现 85
添加高清图片 88
后续步骤 89
探索媒体查询的其他可能性 92
添加响应式文本支持 93
优化媒体查询 96
改造对老版本浏览器的支持 97
远离响应式设计 98
探索CSS4的媒体查询功能 99
小结 100
5管理颜色、图片和字体 101
为网站添加颜色、字体及媒体元素 101
维护资源链接 102
自动链接到对应资源 102
使用PostCSS管理字体 104
创建雪碧图 106
案例：创建一个信用卡图标 107
在PostCSS中使用SVG 110
使用PostCSS修改图标 110
更详细地探究 111
考虑替代方案 113
添加对WebP格式图像的支持 113
切换WebP图像 114
看下文件大小方面的差异 114
操作颜色和调色板 117
使用调色盘展示和混色颜色 118
案例的详细解析 119
使用PostCSS创建颜色函数 120
使用函数调整颜色 121
解析案例 122
使用PostCSS滤镜创建颜色 123
研究案例的细节 125
和CSS3滤镜对比 126
给照片添加Instagram效果 127
小结 128
6创建网格 130
网格设计的介绍 130
自动化编译过程 132
为Bourbon Neat添加支持 134
使用Bourbon Neat创建一个实例 136
深入了解我们的Demo 137
探索PostCSS中的网格插件 138
过渡到使用PostCSS—Neat 139
完善我们的任务列表 141
测试我们的配置 142
使用Neat和PostCSS来创建一个站点 144
转换成PostCSS 146
添加响应式能力 147
纠正设计稿 148
小结 151
7动画元素 152
回顾基本动画 152
摆脱jQuery 153
使用Transit.js库制作动画 155
使用纯JavaScript添加动画 157
使用jQuery来切换class 158
使用预构建库 160
解析Demo中的代码 161
切换到使用Sass 163
创建一个动画画廊 164
添加收尾工作 167
切换到使用PostCSS 170
探索PostCSS可用的插件选项 170
更新代码以使用PostCSS 171
测试我们修改的代码 173
使用PostCSS创建一个Demo 174
更新插件 174
创建Demo 175
详细解析一下我们的Demo 176
优化动画 177
使用我们自己的动画插件 178
更详细地探索插件 180
小结 181
8PostCSS插件开发 182
使用插件扩展PostCSS 182
解析插件的基本结构 183
index.js 184
package.json 184
test.js 186
Vendor模块 187
List模块 187
API中的类 187
API中的节点 188
API中的方法 188
创建过渡插件 189
创建测试 192
修复错误 193
清除最后的错误 195
执行测试 196
分析代码 197
创建字体插件 198
插件功能分析 200
发布的风险 203
简化开发流程 204
插件开发规范 205
发布插件 207
小结 208
9简写型插件、降级插件和包型插件 209
简写型插件 209
包型插件 210
使用简写属性 211
Rucksack和简写型插件 212
示例讲解 213
安装Rucksack 214
缓动动画 214
内容动画 216
剖析代码 217
使用Rucksack修改轮播图 218
代码分析 222
审查和优化代码 223
使用cssnano 224
配置Stylelint 226
降级处理 227
检测兼容性 228
Oldie 228
删除兼容性代码 230
小结 232
10定制处理器 233
创建处理器 233
探索处理器 234
分析package.json文件 234
Gulp任务文件 235
问题剖析 238
修改Gulp任务文件 239
更新背后的原因 242
优化输出结果 243
优化Source Map 243
浏览器前缀 245
伪类选择器 246
更新代码 247
处理图片 249
解析图片处理流程 250
添加自动重载功能 251
扩展处理器的功能 252
测试最终的处理器 255
示例分析 257
诀窍 258
CSStyle 259
CSStyle的优势 260
示例分析 261
小结 262
11管理自定义语法 263
介绍自定义语法 263
准备开发环境 264
实现自定义语法的插件 265
解析内容并修复错误 267
解析SCSS内容 268
探索发生了什么 270
解析CSS 271
替换RGBA颜色 273
研究它是如何运作的 274
使用API格式化输出 275
分析示例代码 278
添加Source Map 279
代码高亮语法 279
安装主题 280
创建一个HTML主题 281
小结 282
12混合处理器 284
迈出第一步 284
探索转换过程 285
选择插件 286
Pleeease简介 287
安装和配置Pleeease 288
手动编译代码 289
使用任务编译代码 290
使用Pleeease创建Demo 291
和其他处理器一起编译代码 292
使用PreCSS 292
在WordPress中安装转换器 293
配置生产环境 293
考虑转换过程 294
修改代码 295
拆分样式 296
添加浏览器前缀 297
检查代码的一致性 299
压缩代码 299
创建变量 300
添加rem单位支持 302
样式表中的嵌套规则 303
样式表中的循环规则 304
考虑未来的特性 305
编译和测试修改代码 305
小结 308
13排除、解决PostCSS的相关问题 309
解决一些常见的问题 309
探索一些常见的问题 310
与操作系统不兼容 310
“任务名称”在gulp文件中找不到 311
找不到＜name of plugin＞模块 312
＜name of task＞未定义引用的错误 313
请提供PostCSS处理器数组对象 313
条目未出现在package.json文件中 314
编译的结果不如预期 315
寻求别人的帮助 317
在Stack Overflow记录问题 317
找到关于PostCSS的Bug 318
小结 319
14为未来做准备 320
支持CSS4320
转换CSS4样式 321
验证电子邮件地址 322
支持range输入框 324
使用cssnext支持未来特性 326
使用cssnext创建一个简单网站 327
创建Demo 327
创建CSS4扩展功能插件 331
添加支持CSS颜色特性 331
回到过去 335
创建自己的插件 337
小结340