echodis

你可能不知道的PostCSS

原文链接: julian.io

最近我尝试在几个不同的工作流中使用PostCSS——Meteor工作流, 简单的React以及Webpack工作流。由于所有人都如此兴奋地去使用它,我意识到我该试试并且它没有让我失望。你将看到我在了解PostCSS之前对它的一些看法,因此这可以说是一篇给那些还没有使用PostCSS的人读的文章。

以下是一些你现在可能有的对PostCSS的看法:

  1. 你可能认为它是另一个预处理器。

  2. 你可能认为把它增加到你当前的工作流中有困难。

  3. 你可能不知道你在Autoprefixer插件中已经用到了PostCSS。

  4. 你可能认为你不需要它。

  5. 如果使用的话,你可能会爱上它。

我将逐一解释这些观点。当然这只是我的个人观点,但我认为很多人可能有同样的想法。

你可能认为它是另一个预处理器。

当然不是。PostCSS是一个JavaScript工具,能够解析带有特殊额外语法的CSS,然后进行处理并返回正常的CSS代码。这对你意味着什么?这意味你仍然可以像以前一样使用你喜欢的预处理器并且同时可以在这些预处理器无法实现的功能上使用PostCSS,例如代码提示,自动添加前缀以及CSS4的属性。这意味你这你能够用PostCSS插件的形式自定义你想要的逻辑。这里有一些PostCSS的插件:http://postcss.parts/,但是PostCSS最强大之处在于你也可以为它编写自定义插件。这是非常好的一部分因为它是相当模块化的。你可以只使用你真的需要的部分。看一下这个官方 插件开发文档。请记住这不是另一个预处理器,尽管如果你希望的话,它可以完全可以替代预处理器。有一个很好的例子,看一下PreCSS插件包。这是一个有大量PostCSS插件的可以替代你的Sass预处理器的工具包。

如果你已习惯使用Stylus或Sass,你将仍然能够使用它们。在预处理之后你仍然可以用PostCSS插件进行处理。

你可能在想把它加入到你现有的工作流中有难度。

你可能在使用一些编译工具如Gulp或Grunt或是Webpack。如果是这样,那么你只需要安装相应的PostCSS插件。你会发现对应的Grunt tasks,Gulp tasks以及Webpack loaders。你可以在任何基于NodeJS的API中使用它。

PostCSS也被很多大公司使用。它被集成在很多著名框架和工作流之中。看看这个配置列表吧。

(为了吸引你我的Meteor包也列在其中,看看吧).

使用方法和使用任何预处理一样简单。具体使用取决于你当前的工作流和技术栈,但这是非常模块化和灵活的。你可以只选择一些你真的需要的插件。而不需要像使用预处理器一样安装所有功能。

你可能不知道你已经在Autoprefixer插件中使用它了。

最有趣的是很多人在用Autoprefixer但他们不知道实际上他们在用PostCSS。这是一种非常普遍的情况。Autoprefixer是Grunt,Gulp以及其他工作和编译系统的功能。它并不是什么特殊的东西,而只是负责处理你的CSS,检查其浏览器兼容性以及在必要时给你的CSS声明加上特殊前缀的另一个PostCSS插件。

有许多配置了Autoprefixer的预处理器。最常用的是autoprefixer-stylusless-plugin-autoprefix。它们所做的就是在背后使用PostCSS和Autoprefixer插件。看看"package.json"文件你就会发现PostCSS和Autoprefixer依赖。

有一些简单的调查显示非常有趣,很多人仍然不知道Autoprefixer就是一个PostCSS插件。它们使用Autoprefixer因为它很出色,也罢,但是他们不知道他们能用PostCSS和他们自己的插件实现相应功能。

You’re probably thinking that you don't need it.你可能认为你不需要它。

很多人认为他不需要PostCSS。他们认为只使用Sass或Stylus是全部需求。我完全理解因为在很多情况下它们是足够的。下面让我们看看一些预处理器不够用的情况。

首先,我们来说说Autoprefixer插件。这是一个出色的任何人都在使用的工具。他们不知道他们实际在用PostCSS,这没关系,但是这是一个来说明PostCSS有多强大以及这些工具是多么被需要的非常好的例子。

The second example – Stylelint. Stylelint is an awesome PostCSS plugin which provides the tools for CSS linting and it has many configuration options. You can configure many rules such as not using id or special class names configured by RegExp etc. Take a look at the Stylelint docs: http://stylelint.io/ 第二个例子 —— Stylelint。Stylelint是一个极好的PostCSS插件,它提供CSS语法检查,也有许多配置项。你可以配置很多规则,比如通过正则表达式配置不使用id或特殊类名。看一看Stylelint文档:http://stylelint.io/

第三 —— Lost Grid System。Lost是一个非常好的例子。它是一个非常强大的网格系统。它是PostCSS的一个插件。你可以在一下文档中了解更多:https://github.com/corysimmons/lost。这是一个展示把你的CSS扩展为标准CSS语法有多简单和有用的例子。

最后一个例子是CSSNext。这是一个非常酷的工具集。有了这个插件,你可以在当前app中使用未来的CSS4语法。在官网上能看到所有酷炫的功能:http://cssnext.io/features/最后一个是CSSNext。

同样如果你用的是Sublime Text或Atom编辑器,也有关于如何在这些编辑器中使用PostCSS的很棒的例子。像PostCSS Sorting package for Sublime Textversion for Atom editor这两个。这是一个非常有用的CSS规则分类器。

以上只是一些你可以用PostCSS实现的非常优秀的例子。你可以编写你自己的插件,也能在网络上找到更多。

如果你只想用预处理器也可以,但是偶尔你的app可能需要更多的功能。我想PostCSS是每位开发者至少掌握基础的工具。

如你使用,你可能会喜欢它。

让我们在这里结束吧。PostCSS是一个基于插件系统的JavaScript,CSS解析器,这意味着你能在真正需要的时候使用这些插件。

我认为我们可以停止使用预处理器了,因为现在有很多预处理器的功能都在PostCSS中得以实现。当然我知道许多人非常喜欢预处理器。我是Stylus的一大粉丝并且非常喜欢用它。但是当我越来越多地用PostCSS,有时候我会觉得可以完全不再使用预处理器了。现在我喜欢在一个技术栈中同时使用Stylus和PostCSS。这很酷。我有点不确定但是可能在近期我将弃用Stylus。

如果你想了解更多的关于PostCSS的知识,以下是一些非常有用的链接:

让我知道你对PostCSS的看法,如果你也在用PostCSS请告诉我。