微信号:gh_ffb279ea1674

介绍:《奇舞周刊》是由奇舞团维护的前端技术周刊.每周五向大家推送前端技术文章.

读《深入PostCSS Web设计》,参与活动赢新书!

2017-08-08 12:10 奇舞周刊

编者按:最近w3plus的大漠联合一些小伙伴翻译了一本关于PostCSS的新书,这本书也应该是国内第一本讲PostCSS的书,小编在这里给大家谋取一点福利,读《深入PostCSS Web设计》书中内容,参与活动赢新书!


参与活动办法:


1、阅读下面的文章,并将此文章分享到朋友圈、并截图发送至奇舞周刊公众号

2、在文章下方留言,发表你对PostCSS的看法

3、截止时间为2017年8月15日、我们将在8月15日公布中奖名单

4、我们将送出5本书,送给符合:(1、高质量留言并且点赞数靠前的;2、同时还分享到朋友圈并截图发送给周刊公众号的)



正文正式开始:


作为一名开发人员,我猜你有一个完美的工作流程。前端工程师可以使用传统的CSS书写样式,也可以使用当前某个处理器(比如Sass或LESS)来实现它们,还可以使用类似Autoprefixer的插件,手动或使用工具(如Grunt或Gulp)来添加浏览器前缀。


听起来很熟悉?如果它适合你,为什么还要打破这些呢,对吧?


麻烦的是,某个朋友或同事已经开始谈论一个新的处理器PostCSS。他们已经引起了你的兴趣,你想要获得更多关于PostCSS是什么、PostCSS如何工作的信息。


欢迎来到快速增长的PostCSS生态系统!PostCSS本身不做任何事情,但是它可以与数百个可用的插件配合,从而有潜力成为一个真正强大的处理器。开发者不得不依靠Sass这样的单一库的日子就要过去,取而代之的是开发者可以根据项目的要求准确选择使用哪些插件。PostCSS是一个非常快速的处理器,你准备好了吗?


相信答案是肯定的,让我们开始吧。


这本书涵盖了哪些内容


第1章:PostCSS简介。本章将开启我们的PostCSS世界之旅,探索PostCSS的功能以及如何使用PostCSS生态系统将基本代码转换为可在项目中使用的、有效的CSS样式。你会发现使用这个生态系统的好处,它的架构和模块化的方法使我们能够组合一个定制的处理器专门针对我们的需求。


第2章:创建变量和混合宏。我们在本章可以看到一些现有处理器技术中常见的基本概念,如变量和混合宏。本章将介绍如何将其转换为PostCSS,并了解从这些技术转换到使用PostCSS可以获得的优势。


第3章:嵌套规则。探讨了现有处理器如Sass或LESS如何利用嵌套等概念来减少我们需要编写的代码量,以及如何在PostCSS处理器中获得相同的功能。


第4章:创建媒体查询。本章介绍了使用PostCSS和媒体查询向网站添加响应式样式支持的基础知识。我们将学习如何改进对旧版网站和浏览器的支持,并探讨如保在CSS 4媒体查询已出现的情况下做更进一步的工作,并在PostCSS中提供支持。


第5章:管理颜色、图像和字体。本章介绍了可用于处理和操作PostCSS中的图像、颜色和字体的插件。我们将通过一些示例来说明如何在PostCSS中操纵图像和颜色,例如使用系统中的调色板创建图像精灵或更改颜色。


第6章:创建网格。通过使用网格构建网站的骨架,我们将探索使用网格的基本概念,并发现一些可用于创建网格的PostCSS插件。本章将介绍一些使用Bourbon Neat网格系统的例子,并在随后利用等效的PostCSS插件进行相同的实现,并为结果代码添加响应式能力。


第7章:动画元素。首先,简要介绍如何使用JavaScript来添加动画,然后,介绍如何切换到使用CSS创建动画;最后,转换到使用PostCSS。在使用PostCSS创建快速演示,并学习如何使用PostCSS优化动画之前,我们将探索使用一些更知名的库,如Animatie.css。


第8章:PostCSS插件开发。本章我们将学习如何使用插件来扩展PostCSS,并探索这种插件的典型架构。然后,我们将要看一些示例插件,并使用可用的样板代码创建自己的插件,接着测试并让互联网用户可以下载插件。


第9章:简写型插件、降级插件和包型插件。本章首先介绍了一些可用的简写型插件和包型插件,然后探索了如何使用自己的快捷键插件来补充它们。我们还将了解如何使用PostCSS提供的插件包来审查和优化代码,并学习如何为PostCSS代码提供候选方案以帮助维护对旧版浏览器的支持。


第10章:定制处理器。本章汇集了在前几章介绍过的一些技术,以生成一个定制处理器,我们可以将其用作我们项目中转换代码的基础。在添加源映射和浏览器前缀支持之前,你还将研究如何优化输出,然后在网站上进行测试。最后,我们将学习如何使用CSStyle框架扩展处理器,以编写适用于Sass和PostCSS的代码。


第11章:管理自定义语法。本章介绍了如何使用API编写自定义语法,并探讨了一些可用于对Sass或LESS语法编写的代码进行解析的方法。在将输出转换成可以在屏幕上显示或保存到文件中的内容之前,我们介绍了一些使用PostCSS解析代码的示例。我们还添加了使用midas库高亮显示代码的支持。


第12章:混合处理器。本章介绍了如何从混合处理器开始过渡到使用PostCSS。在安装并使用PostCSS的功能之前,先介绍了Pleeease库。然后,我们将在使用它之前设置一个编译过程,以便对标准的WordPress主题进行更改。


第13章:排除、解决PostCSS的相关问题。本章介绍了使用PostCSS时可能遇到的一些常见问题,例如“taskname not in our gulpfile”错误,同时介绍了遇到其他失败时应该如何处理。本章还将介绍如何在PostCSS核心系统或其插件中获取帮助或错误记录的详细信息。


第14章:为未来做准备。本章涵盖了从人们所知的CSS4中支持未来样式标准的一些可能的选择。我们还将探索其中包含的风险,以及如何使用现有的插件来获得同样的支持,或者扩展它们以增加对新的CSS4选择器的支持。


这本书为谁而写


本书面向熟悉HTML5和CSS3,同时希望掌握PostCSS 作为简化开发流程、摆脱对现有处理器(如Sass或Stylus)的依赖的前端开发人员。为了充分利用本书,你应该对HTML、CSS和 JavaScript有很好的了解,如果有一些使用Sass、LESS 或Stylus等预处理器的经验会更加理想。


 
奇舞周刊 更多文章 使用font-display 定制字体渲染策略 Vue.js 很好,但是比 Angular 或 React 更好吗? 网页的“关键”请求 奇舞周刊第 221 期:深入 PostCSS Web 设计 震惊!苹果向开发者低头?!!
猜您喜欢 头条丨迷航中的华为,选择了什么? 2017年五个最佳的JavaScript框架 异军突起,测聘网荣膺“大中华区最佳人才招聘网站” 聊聊用户画像技术怎么做? 从输入URL到页面加载发生了什么