![]()
作者简介 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 内容推荐 PostCSS作为一种工具,快速地出现成为现有的预处理器像SASS和Less的未来发展趋势,得益于其强大性、快速性和易用性。在吸收最前沿样式到网页的同时保持代码的性能和可维护性方面,这个综合向导提供了深度指导。这本书展示了怎么利用PostCSS的优势去简化整个样式表编辑程序。 |