深入PostCSS Web设计
  • 推荐0
  • 收藏1
  • 浏览1.3K

深入PostCSS Web设计

Alex Libby (作者)  廖伟华 (译者)

  • 书  号:978-7-121-31817-7
  • 出版日期:2017-07-01
  • 页  数:
  • 开  本:
  • 出版状态:上市销售
  • 原书名: Mastering PostCSS for Web Design
  • 原书号:9781785885891
  • 维护人:张春雨
纸质版 ¥99.00
PostCSS是目前CSS处理器中最流行的一个处理器。PostCSS依托其强大的插件生态系统,为CSS处理器增加了无穷的可能性。
本书共十四章内容,包括介绍PostCSS,创建变量和混合宏,嵌套规则,创建媒体查询,管理颜色、图片和字体,创建网格,动画元素,PostCSS插件开发,简写型插件、降级插件和包型插件,定制处理器,管理自定义语法,混合处理器,排除、解决PostCSS的相关问题,为未来做准备。
以上内容将带你深入了解PostCSS以及如何使用PostCSS。如果你还没有准备好去了解PostCSS能做什么,那么,请跟着这本书的步骤进行系统而深入的学习,你将进入到CSS的全新世界。

碾压Sass|LESS 奔向高性能|模块化现代CSS之路
译者序

众所周之,任何一个Web页面或者Web应用程序都离不开CSS。CSS规范从最初的CSS1到现在的CSS3,再到CSS规范的下一个版本,规范本身一直处于不断发展的演化之中。这给开发人员带来了效率上的提高。不过与其他Web领域的规范处境相似,CSS规范在浏览器兼容性方面一直存在各种各样的问题。不同浏览器在CSS规范实现方面的进度也存在很大差异。另外CSS规范本身的发展速度与社区的期待还有一定的差距,这也是为什么Sass、LESS和Stylus等CSS处理器可以流行的重要原因。Sass、LESS和Stylus等CSS处理器提供了很多更实用的功能,也体现了开发人员对CSS语言的需求。而本书介绍的PostCSS是目前CSS处理器中最流行的一个处理器。PostCSS依托其强大的插件生态系统,为CSS处理器增加了无穷的可能性。
PostCSS本身是一个功能比较单一的工具。它提供了一种使用JavaScript代码处理CSS的方式。它负责把CSS代码解析成抽象语法树结构,再交给插件进行处理。插件基于CSS代码的AST所能进行的操作是多种多样的,比如可以支持变量、混合宏、嵌套,增加浏览器相关的私有前缀,或是把符合未来的CSS规范的样式规则转译成当前CSS规范支持的格式。从这个角度来说,PostCSS的强大之处在于其不断发展的插件体系或者说其插件生态。目前PostCSS已经有200多个功能各异的插件。开发人员也可以根据项目的需求,开发出自己的PostCSS插件。最为庆幸的是,来自全球各地的PostCSS插件开发人员根据自己项目的需求开发出不同的功能插件,并且将这些插件开源贡献给其他有需要的开发人员使用。
PostCSS从诞生之时就给社区带来了对其类别进行划分的争议。这主要是由于其名称中的Post,Post很容易让人联想到PostCSS是用来做CSS后处理的,从而将其与已有的CSS处理(以前我常称之为CSS预处理器)语言,比如Sass、Less和Stylus等进行对比。实际上,PostCSS的主要功能只有两个:第一个功能是前面提到的把CSS解析成JavaScript可以操作的AST,第二个功能是调用插件来处理AST并得到结果。因此,不能把PostCSS简单地归类成CSS预处理器或后处理器。PostCSS所能执行的任务非常多,其同时涵盖了传统意义上的预处理和后处理。PostCSS是一个全新的工具,给开发人员带来了不一样的处理CSS的方式。而且这种方式提高了Web开发人员编写CSS的效率,更降底了个人或者团队管理和维护CSS的成本,特别是针对于一个大型的项目,这种优势体现得更为明显。
如果你想真正了解PostCSS的话,你应该尽快学会PostCSS是什么以及如何使用它。
本书通过十四章的内容带你深入了解PostCSS以及如何使用PostCSS。如果你还没有准备好去了解PostCSS能做什么,那么,请跟着这本书的步骤进行系统而深入的学习,你将进入到CSS的全新世界。
我们能够使用这么优秀的CSS处理器来编写、维护和管理CSS,需要特别感谢@Andrey Sitnik,是他给我们创造了这么强大的处理器,并且让PostCSS以一个惊人的速度发展,越来越多的人开始了解它、使用它。
我们也要特别感谢@Alex Libby,是他花费了大量时间和精力为我们编写了一本深入浅出,带我们一步一步了解PostCSS的所有内容的优秀图书。如果你认真阅读完本书,你将能熟练地使用PostCSS,借助JavaScript编写出自己想要的PostCSS插件,甚至还可以定制一个属于自己或团队的CSS处理器。
我在本书的翻译过程中得到了电子工业出版社的张春雨、田志远以及其他工作人员的帮助,在此一并表示由衷的感谢。
本书主要由我和南北、彦子和静子几位译者共同翻译。虽然我们经常参与社区前端技术文档的翻译,但翻译图书还是初次,因此全书难免存在一些错误或者不当之处,敬请广大读者批评指正。译者非常愿意通过微博(http://weibo.com/w3cplus)或电子邮件(w3cplus@hotmail.com)与各位同行探讨有关PostCSS或CSS处理器的相关技术问题。

大 漠
2017年6月于杭州

目录

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
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
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
★找不到模块 312
未定义引用的错误 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
小结

读者评论

  • 在书架上落了几年灰了,最近无意中翻出来看看,错误真的是不一般的多。

    oldfu发表于 2020/8/18 17:43:19
  • 这书的质量是真的差劲,错误太多了,能不能写良心书;知识是来不得半点虚假;技术类的书写的不够严谨就不要发布;勘误太多就是垃圾,要浪费多少人的时间;

    mauro发表于 2018/9/21 10:38:36
  • 资源的第一个demo 就没有运行起,请校验修正

    l7871878100发表于 2018/9/15 23:16:27
  • 第一个例子就没实现,我都要怀疑我自己了

    suncheng发表于 2018/4/29 12:46:50
  • 下载资源请问在哪,这个下载资源设计有点low

    liusu520.qqqq发表于 2017/11/9 11:12:26
    • 就在右侧啊

      suncheng发表于 2018/4/29 12:47:04

下载资源

图书类别

相关图书

Knative最佳实践

Jacques Chester (作者) 赵吉壮 杨云锋 (译者)

本书主要围绕 Knative 进行展开,主要作者是 Knative 专家(社区作者)Jacques Chester ,先后从 Knative 构建、扩缩容、事件...

¥118.00

ATT&CK框架实践指南

过去,入侵检测能力的度量是个公认的行业难题,各个企业得安全负责人每年在入侵防护上都投入大量费用,但几乎没有人能回答CEO 的问题:“买了这么多产品,我们的入侵防...

¥148.00

云原生数据库:原理与实践

周恩昌 (作者)

本书详细剖析了作为核心基础软件系统的数据库在云计算时代的技术演进历程,从架构设计、实现机制和系统优化等多个角度阐述传统数据库技术是如何一步步发展到云原生形态的。...

¥99.00

SequoiaDB分布式数据库权威指南

黄达玮 (作者)

本书旨在介绍 SequoiaDB 巨杉数据库的基本概念、应用场景、企业级应用案例、数据库实例创建与管理方式、数据库集群管理的基本策略、以及性能调优和问题诊断。...

¥99.00

最强iOS和macOS安全宝典

Jonathan Levin (作者) 郑旻 (译者)

《最强iOS和macOS安全宝典》以苹果操作系统的安全为主题,主要面向苹果高级用户、系统管理员、安全研究人员和黑客。<br>本书主要分三个部分:第一部分重点介绍...

¥179.00

极限黑客攻防:CTF赛题揭秘

王新辉 天融信阿尔法实验室 张黎元 郭勇生 (作者)

CTF在网络安全领域特指网络安全技术人员之间进行技术竞技的一种比赛。CTF代替了以往黑客通过互相发起真实攻击进行技术比拼的方式,题目来自日常工作环境,并将其中的...

¥99.00