如果你会了Sass，你就会了ES2015!...虽然不是全部，但也有很多惊人的相似之处！当学习最新的ECMAScript 规范，ES2015(以前被称为ES6)时，碰到了一些让我立刻想到Sass的特性。

你可能已经听说过PostCSS,它比libsass快了几乎两倍(并且比Ruby Sass快了28倍)；或者听说过它支持cssnext和CSS Modules而且可扩展功能,但你是否已经找机会尝试一下了？PostCSS最强大之处在于它是模块化并且基于插件的架构，不过这也是个缺点。如果你之前在项目中使用Sass(比如大多数的设计师和前端开发者)，你从不需要配置任何东西——Sass内置了全部实用功能，开箱即用。然而，PostCSS需要你做一些配置。你不得不从一眼看不到底的插件列表选择插件并且自己把全部插件一起配置。

去年的大部分时间我写的CSS都放在一个预处理的Sass文件中，尤其是在一个.scss文件中。对我来说不错，但没有好好利用Sass提供的特性。我的SCSS文件通常比嵌套输出的CSS要小。我大量使用变量和引入不常用的混合宏，但它使用起来是最简单不过的。我想改变现状，并希望你们不要介意,如果我大胆想出如何开始创建更加模块化和可维护的Sass项目。

Sass多年来一直是我的首选。最近我有一段时间，想尝试使用PostCSS的cssnext插件来处理CSS样式。我一直想使用工具尝试写一些CSS的新特性。同时自己的个人网站也是一个最佳测试这些新特性的实验地。

我们和全局作用域的CSS斗争了多年，现在终于是时候结束它了。不管你用的是什么语言还是框架，CSS命名冲突将不再是个问题。我将给你展示一下PostCSS和PostCSS-modules如何使用，并且可以在服务端使用它们。 CSS起初只是一个美化文档的工具，但是事情到1996年发生了变化。浏览器中不再单单只有文档了，即时通讯，各种软件，游戏，没什么是浏览器不能承载的。

去年在CSS Conf科普了一下《CSS Grid Layout》相关的概念。会后PostCSS的作者@Andrey Sitnik给我力荐grid-kiss这个PostCSS插件。说这个插件可以让CSS Grid变得更为简单。一直都想尝试一下，就是没动手，今天体验了一下，还是很有意思的。今天花点时间整理一下，跟大家一起分享。

PostCSS是一种工具，一款已成长为像Sass和LESS一样主流的处理器，这一切都归功于它的强大、速度和易用性。《深入PostCSS Web设计》是使用PostCSS的完全指南，《深入PostCSS Web设计》将指导你如何编写优秀的样式，并将其运用到Web页面，同时让你的样式保持可维护性。这本《深入PostCSS Web设计》将向你展示如何利用PostCSS简化样式表的整个过程。它涵盖了给Web页面添加动态的、现代的样式特性的各种技术。随着内容的深入，你将学习如何使用PostCSS来让CSS更具模块化的特性、更易于维护。读完《深入PostCSS Web设计》，你将掌握如何给Web添加CSS样式表，以及如何创建高执行，可维护的样式表。

PostCSS是一个很有趣的项目。简而言之，它将CSS转换成抽象语法树(AST)，也就是JavaScript可以操作的一种数据形式。基于JavaScript的PostCSS插件可以执行不同的代码操作。PostCSS本身并没有改变你的CSS，它请允许插件执行和转换你的代码。实际上，对于CSS的操作，PostCSS插件并没有任何限制。只要你有想得到的，你都可以写一个PostCSS插件来实现。

多年来，我们一直与全局CSS作斗争。现在是时候结束它了。不管你使用哪种语言或框架，CSS命名的冲突不再是问题。我将向你展示如何使用PostCSS和PostCSS-modules在服务端自动处理它。CSS最初只是用来美化文档的一种工具。自1996年以来，许多事情发生了变化。浏览器不再是文档查看器了。聊天、工作、游戏，几乎没有任何浏览器不能做到的。现在，我们比在HTML中标记文本和使用CSS开发内容的网站要多得多。我们使用CSS来充分发挥它的潜力，创造出它很难处理的东西。

在《Sass绘制多边形》和《使用Sass制作菱形网格布局》文章中，我们了解了怎么通过Sass来实现多边形和菱形相关的网格布局，但这些在实际的布局中使用场景并不常见。最近@vmcreative的Hexi Flexi Grid让我感到CSS Grid布局更强大的一面。而这种布局在实际的布局也可以一用。今天把这个仓库中的功能集成了SassMagic中。那么简单的花点时间来看看Hexi Flexi Grid布局。