深入PostCSS Web设计

出版者:电子工业出版社

作者:【英】Alex Libby（亚历克斯·利比）

页数:360

译者:大漠

出版时间:2017-7

价格:99.00

装帧:平装

isbn号码:9787121318177

具体描述

PostCSS 是目前CSS 处理器中最流行的一个处理器。PostCSS 依托其强大的插件生态系统，为CSS 处理器增加了无穷的可能性。

《深入PostCSS Web设计》共十四章内容，包括介绍PostCSS，创建变量和混合宏，嵌套规则，创建媒体查询，管理颜色、图片和字体，创建网格，动画元素，PostCSS 插件开发，简写型插件、降级插件和包型插件，定制处理器，管理自定义语法，混合处理器，排除、解决PostCSS 的相关问题，为未来做准备。

以上内容将带你深入了解PostCSS 以及如何使用PostCSS。如果你还没有准备好去了解PostCSS 能做什么，那么，请跟着《深入PostCSS Web设计》的步骤进行系统而深入的学习，你将进入到CSS 的全新世界。

目录信息

1 PostCSS简介 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
７　动画元素 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
8　PostCSS 插件开发 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
支持CSS4 320
转换CSS4样式 321
-- 验证电子邮件地址 322
-- 支持 range输入框 324
使用cssnext支持未来特性 326
-- 使用cssnext创建一个简单网站 327
-- 创建Demo 327
创建CSS4扩展功能插件 331
-- 添加支持CSS颜色特性 331
-- 回到过去 335
-- 创建自己的插件 337
小结
· · · · · · (收起)

用户评价

作为一个有着多年前端经验的老兵，我通常对市面上充斥着大量“速成”和“入门”的书籍持谨慎态度，但这本书的深度和广度着实让我感到惊喜。它并没有停留在简单的语法介绍，而是深入挖掘了底层机制和生态系统的构建哲学。我特别赞赏其中关于性能优化那一章的论述，作者没有仅仅停留在CSS压缩的层面，而是详细剖析了不同处理器的编译速度差异，以及如何根据项目规模来权衡选择最适合的配置。这种从宏观架构到微观实现的全面覆盖，体现了作者深厚的行业洞察力。书中的案例往往不是孤立存在的，而是紧密结合现代主流框架的使用场景，这使得理论知识能够立刻转化为实用的生产力。更难得的是，它还探讨了团队协作中CSS规范统一的挑战与解决方案，这往往是许多技术书籍会忽略的“软技能”部分。阅读此书，就像是获得了一张进入高级前端架构师俱乐部的入场券，它帮助我系统性地梳理了过去零散的知识点，并构建了一个更加严谨的技术知识体系框架。

这本书给我的最大感受是“厚重”——这里的“厚重”并非指篇幅冗长，而是指知识的密度和信息的分量。它成功地将枯燥的编译流程和抽象的配置艺术，转化成了一篇篇引人入胜的叙事。作者在处理配置文件的复杂性时，采取了一种“由简入繁，逐层递进”的策略，先从最基础的依赖管理入手，然后逐步深入到自定义插件的编写和依赖注入的原理。特别是关于Sourcemap生成的深度剖析，让我终于彻底理解了在复杂构建环境中调试的底层原理，这解决了困扰我多年的一个技术盲区。这本书不仅仅是关于“做什么”（What），更侧重于“为什么”（Why），它探究了这些工具和规范被创造出来的根本原因，从而培养出更强的底层理解力。对于那些希望从“会用工具”跨越到“理解和改造工具”层面的资深开发者来说，这本书提供了一个近乎完美的技术进阶阶梯，它的内容经得起反复研读和实践检验。

坦白说，我起初是对这本书的标题抱有怀疑态度的，感觉可能又是一本炒作概念的“水书”。然而，翻开第一章后，我的疑虑便烟消云散。这本书的语言风格非常独特，它不像传统技术书籍那样板着脸孔，而是充满了探索的热情和一点点恰到好处的幽默感，读起来非常轻松愉快。作者似乎非常理解读者在学习新工具时可能遇到的挫败感，因此在关键的“陷阱”和“常见误区”部分，都给予了非常细致的“避坑指南”。我个人最受启发的是关于自定义属性（CSS Variables）的高级应用部分，书中展示了如何利用它们在不引入额外预处理器的情况下，实现复杂的组件主题切换逻辑，这彻底颠覆了我对变量应用的传统认知。它不是简单地罗列API，而是教你如何“思考”如何用这些工具解决实际问题。这本书的实践性极强，几乎每一页都有可以立刻复制粘贴到我的工作项目中并立即看到效果的解决方案，极大地提升了我的日常开发效率。

这本书的结构设计堪称典范，它采取了一种螺旋上升的学习路径，确保读者不会因为基础不牢而在中途掉队。作者非常注重上下文的铺垫，每一次引入一个更复杂的新特性时，都会巧妙地回顾前文已经介绍过的相关概念，使得知识点的联系更加紧密。我特别欣赏作者对于工具链集成部分的讲解，它不仅仅局限于本身，而是将视野扩展到了与打包工具如Webpack、Rollup的协同工作上，这对于现代前端开发而言是至关重要的。书中对不同版本迭代间的兼容性问题也进行了深入的剖析，这在处理遗留项目维护时显得尤为宝贵。它教会我的，不是如何使用某个特定工具的某一个功能，而是理解工具背后的设计哲学，以及如何在快速变化的技术栈中保持学习的敏捷性。这本书无疑是为那些追求精益求精的开发者准备的，它强迫你去审视自己目前的工作方式，并不断寻找更优解，其价值远超其定价。

这本书的排版和设计实在让人眼前一亮，那种简洁、现代的视觉风格，完全符合我对一本技术书籍的期待。从封面到内页的字体选择，都透露出一种精心打磨的专业感。我尤其欣赏作者在内容组织上的匠心独运，章节之间的逻辑过渡非常自然，让人感觉阅读过程就像是在进行一场流畅的思维漫步，而不是生硬地啃读技术文档。每一个代码示例都配有详尽的注释和图示，即便是初次接触CSS预处理概念的读者，也能迅速抓住核心要点。书中对于一些复杂概念的解释，比如模块化CSS和作用域管理，作者没有采用枯燥的术语堆砌，而是通过生动的比喻和实际应用场景来阐述，使得那些原本可能令人望而生畏的知识点变得平易近人。这不仅仅是一本工具书，更像是一本引导你建立良好前端工程化思维的指南，让人在学习具体技术的同时，也潜移默化地提升了构建健壮、可维护前端项目的能力。对于任何致力于提升自身CSS工作流的开发者来说，这本书绝对是案头必备的宝典，它提供的不仅仅是知识，更是一种全新的工作视角。

这书是为推广 postcss 做的广告，总是告诉我们可以用种种postcss插件代替原本SASS的功能。可在这时代，我宁可用sass节省认知成本。

这书是为推广 postcss 做的广告，总是告诉我们可以用种种postcss插件代替原本SASS的功能。可在这时代，我宁可用sass节省认知成本。

三星给postcss，有能力的建议读原版，中文翻译的感觉错误有点多，快速过了一遍，还是有收获的

三星给postcss，有能力的建议读原版，中文翻译的感觉错误有点多，快速过了一遍，还是有收获的

三星给postcss，有能力的建议读原版，中文翻译的感觉错误有点多，快速过了一遍，还是有收获的