自从我从事 WEB 开发以来，一直都在规规矩矩地使用标准的栅格布局。直到有一次在公司跟实习生交流时，我意识到开发者的思维已经被条条框框固定住了。这里并不是想说栅格布局这种规规矩矩的布局有什么不好，实际上这些布局就像是沃尔沃汽车一样，让人感到安稳和可靠。但是，拥抱变化何尝不是一件趣事？非常幸运的是，我能与众多才华横溢的设计师共同工作。在最近的一个项目中，他们提出了一种基于栅格布局的菱形布局。话不多说，迎战问题(•̀o•́)ง！

在上一篇文章中我们一起了解了如何在项目中使用Gulp来配置PostCSS。在这篇文章中，我们将一起探讨如何在项目中使用Grunt来配置PostCSS。

众所周知，Sass中有一些类似于其他编程语言的特性与功能，那么在本文中，我们将会解析一下Sass中的操作符。主要向大家介绍如何使用Sass中的操作符。

如果你深入地使用过 Sass，那么一定会接触过 mixin。一个独立的 mixin 往往聚合了大量的控制指令来实现复杂的功能。在本文中我们就将这些控制指令和表达式做一些讲解和实践。也许你在开发中不见得会用到它们，但是熟悉一下这些指令，可能会有意想不到的收获！

当你阅读完本系列教程前面的内容，你应该收集了一些PostCSS插件。如何选择PostCSS的插件，这一切取决于你的经验。鉴于前面的基础，我们来继续了解PostCSS插件的生态系统。通过这个可以了解PostCSS多么强大，以及他能提供哪些功能。我们将讨论PostCSS插件管理，你可以通过这些去关注最新的PostCSS插件，了解这些插件属于什么类别，考虑如何将这些插件运用到实际的项目中。

在前面一系列的PostCSS教程中我们学习了PostCSS一些基础知识。接下来准备继续使用PostCSS生成样式表，而且采用不同类型的插件用于不同的目的。在这篇教程中我们使用PostCSS创建一个跨浏览器兼容性的样式表。我们将要做的：需要前缀的自动添加前缀，添加一系列的IE版本，回退到IE8、IE9和IE10，为有动画属性添加will-change属性。那我们开始吧。

上一节的教程中学习了如何使用PostCSS插件帮助你处理跨浏览器兼容性的样式，特别是如何对IE老版本做降级处理。在本教程中我们将继续学习如何使用PostCSS插件让你的样式表更加高效，加载更快。这些都可以通过PostCSS插件执行各种压缩和优化。

在《PostCSS深入学习: 跨浏览器兼容性》和《PostCSS深入学习: 压缩和优化CSS》两篇文章中学习了使用PostCSS插件实现跨浏览器的兼容性和CSS样式的压缩与优化，本质上说，这些都是后处理CSS的方式。在这篇教程中，你将学习PostCSS插件中的预处理插件包PreCSS，可以像使用Stylus，Sass或LESS一样使用PreCSS。

在上一篇文章中，我们学习了如何使用PreCSS这款优秀的预处理器插件包。在这篇文章中我们将基于PostCSS的基础上以不同的方式构建一个预处理器。你可以精心挑选一些优秀的PostCSS插件，自定义构建一款属于自己的预处理器。通过我个人一些发现，通过设置一些插件带你定制一个强大的预处理器。当然，你可以选择我下面提到的插件，你也可以选择你喜欢的插件来定制属于自己的预处理器。

如果你喜欢使用PostCSS，但又不想抛弃你最喜欢的预处理器。不用担心，你不需要作出二选一的选择，你可以把PostCSS和预处理器(Sass、Stylus或LESS)结合起来使用。有几个PostCSS插件配合预处理器得到很好的赞誉，因为他们将功能添加到你的工作流中，让你工作变得更加轻松。如果你只使用一个预处理器，而不使用这些插件，你的工作流至少会变得更加困难。我们会涉及一些免费的PostCSS插件，然后我们将会介绍一些配置的阐述，告诉您如何将PostCSS和你喜欢的预处理器(Sass、Stylus或LESS)之一结合在一起使用。