PostCSS深入学习：您需要了解的内容

如果您真的需要了解PostCSS的一件事，那就是您应该了解它是什么以及如何 尽快 使用它 。

在本系列中，我们将深入探讨PostCSS，并带您了解所有使用它的主要方法。 如果您尚未对PostCSS的功能感到震惊，请准备一个勇敢的新CSS世界。

PostCSS简介

PostCSS以惊人的速度日益普及。 越来越多的人开始理解它所提供的功能，当他们意识到如何在自己的项目中独特地使用它时，就享受着“灯泡时刻”。

2014年，该年度的下载总数略低于140万，但从2015年1月到6月， 下载量已超过380万 。

Autoprefixer是一种非常流行的PostCSS插件，已被Google，Shopify，Twitter，Bootstrap和CodePen使用。 WordPress还使用Autoprefixer以及RTLCSS插件。 阿里巴巴使用了多个PostCSS插件，并开发了自己的插件并为其他插件项目做出了贡献。

除此之外，Mark Otto还谈到了用PostCSS编写的Bootstrap版本5：

哦，顺便说一句-Bootstrap 4将在SCSS中。 而且，如果您愿意，v5可能会在PostCSS中使用，因为听起来很酷。

—马克·奥托（@mdo） 2015年4月23日

PostCSS刚刚集成到CodePen.io中 ，可以通过在CSS设置中选择它来内联使用：

PostCode上CSS

PostCSS正在增长，并且正在快速增长，这有充分的理由。

简而言之PostCSS

那么什么是PostCSS？ 最好的定义来自项目自己的GitHub页面：

“ PostCSS是使用JS插件转换CSS的工具。 这些插件可以支持变量和混合，可以转换将来CSS语法，内联图像等。

简而言之，PostCSS将CSS转换为JavaScript可以操纵的数据形式。 然后，用于PostCSS的基于JavaScript的插件将执行上述代码操作。 PostCSS本身并不会改变您CSS，它只是为插件执行其设计要进行的任何转换铺平了道路。

PostCSS插件可以应用于CSS的操作类型基本上没有限制。 如果您能想到它，则可以编写一个PostCSS插件来实现它。

PostCSS插件的行为类似于预处理器。 他们可以优化和自动添加代码前缀，可以添加将来的语法，可以执行lint，可以处理变量和逻辑，可以提供完整的网格系统，可以提供编码快捷方式...清单很长。

什么不是 PostCSS

您可以使用PostCSS插件几乎可以做任何事情，再加上PostCSS还是一个相对较新的事实，这导致人们对该工具的真正含义产生了一些误解。

许多人（最初包括我本人在内）对PostCSS的实际含义并不完全了解，因此要么错过了PostCSS所提供的功能，要么就迟到了。

因此，在进行下一步之前，我们先弄清PostCSS 不是的一些东西。

PostCSS不是预处理器

许多开发人员表示，他们正在放弃CSS预处理程序，而赞成PostCSS。 同时，其他人指出，由于他们喜欢当前的预处理器，因此不喜欢PostCSS。 但是PostCSS 不是预处理器。

是的，您可以根据需要将其绝对用作预处理器，但是也可以使用绝对没有类似于预处理器功能的PostCSS。 您甚至可以继续将自己喜欢的预处理器与PostCSS 结合使用。

PostCSS不是后处理器

PostCSS名称中带有“ post”一词，但它也不是真正的“后处理器”。 后处理通常被视为采用包含有效/标准CSS语法的最终样式表并对其进行处理，以进行诸如添加供应商前缀之类的操作。 但是，PostCSS不限于仅以此方式操作。 如上所述，它的行为也可以像预处理器一样。

也许最好只是将PostCSS视为“处理器”。 正如PostCSS的创建者Andrey Sitnik在Twitter上所说：

现在该承认我的错误了。 “后处理器”一词不好。 PostCSS团队停止使用它。 https://t.co/vs2AiXGoJy

— PostCSS（@PostCSS） 2015年7月28日

正如多产的PostCSS贡献者和插件开发人员Maxime Thirouin在Twitter上所描述的那样，与其说PostCSS中的“ post”是指“后处理”，不如说是CSS和更高级的含义。

@HugoGiraudel postcss贡献者中没有人正在使用此表达式。 现在是Postcss，例如“ css and beyond”

— Maxime Thirouin（@MoOx） 2015年7月21日

PostCSS不是“未来语法”

有一些优秀的和非常著名的PostCSS插件，它们允许您使用将来的语法编写，即使用将来会可用但尚未得到广泛支持CSS。 但是，PostCSS并不是天生就支持将来的语法。

一些开发人员表示不愿意使用PostCSS，这是因为他们不确定自己是否适合编写将来的语法。 但是，编写将来的语法只是使用PostCSS的众多方法之一。

如果您选择这样做，则可以使用PostCSS彻底改变您的开发过程，而无需担心将来的语法问题。

PostCSS不是清理/优化工具

Autoprefixer插件的成功使人们普遍认为PostCSS是在已完成CSS上运行以清理和优化它以实现速度和跨浏览器兼容性的东西。 这是我自己的看法，直到我了解到PostCSS可以实现的其他许多功能。

是的，有许多出色的插件可提供出色的清理和优化过程，但这只是所提供功能的一小部分。

PostCSS没有任何一件事

关于PostCSS的最引人注目的事情是它不限于任何一种功能。 它代表了一套完全可定制和可配置的功能，可能是无限的。

将WordPress插件视为并行的。 电子商务插件非常流行，但是没有人将WordPress本身视为电子商务引擎，并且未根据其电子商务插件评估WordPress的优点。

就PostCSS而言，我喜欢将其视为您用来制作三明治的面包。 就其本身而言，它看起来并不多，但这恰恰是它的本意，而这种明显的“空虚”就是它具有如此巨大潜力的原因。 这是无数种馅料的容量，可以带给您令人惊奇的效果。

昨天一个三明治

尝试过花生酱三明治，不喜欢吗？ 绝对没有理由永远吃掉面包和所有类型的三明治。 相反，继续尝试下一次填充，您可能会发现一些东西，这些东西已成为您日常生活中令人敬畏的新部分。

是什么使PostCSS特别

PostCSS是CSS的完全不同的方法。 我曾与伦敦的一家前端承包商说这是“用于CSS生产的瑞士军刀”，这是完全恰当的描述。

让我们看一下使PostCSS如此特别的一些原因。

其插件生态系统提供多种功能

就像PostCSS本身一样令人赞叹，它是各种各样的插件的真正亮点。 当您在PostCSS GitHub页面上阅读可用插件的列表时，会发现以前从未在一个空格中包含过的各种功能。

有一些用于将来语法的插件，使您可以使用颜色功能，圆锥渐变，自定义属性，自定义选择器，用于媒体查询的自定义别名等功能。

有一些回退插件可以创建传统语法，例如为rgba()颜色添加十六进制回退，为IE8添加不透明度过滤器，为IE8转换伪元素选择器，以及为rem单元生成px后备。

提供了二十多种语言扩展插件，包括为每个循环添加mixin，变量，条件，BEM和SUIT样式类生成等。

提供了多种颜色管理插件，可以从一种颜色格式转换为另一种颜色，修改alpha级别，组合颜色，生成对色盲友好的配色方案，仅举几例。

有网格系统，优化工具，添加快捷方式和速记的插件，lints和其他分析与报告插件。

在几段中无法完全传达当前插件选择的不断扩展的多样性，因此请务必亲自检查一下列表 。

仅使用您需要的东西

可用于PostCSS的令人难以置信的插件列表的另一面是，您可以选择使用任意数量的插件。

是否只想使用PostCSS来提高CSS的效率和跨浏览器友好性？ 加载一些优化插件，您就可以离开了。

是否想仅将PostCSS用作预处理器？ 改用一些语言扩展插件，一切就绪。

PostCSS的基本原理是精细的模块化，因此没有笨拙的插件可以处理多种功能。 而是按功能创建一个插件，然后从那里可以将它们组装成具有常用主题功能的插件包。

例如，您可以为语言扩展手动选择一系列插件，并创建自己的自定义预处理器。 或者，您可以只加载PreCSS包，这将使您一次自动访问多个语言扩展插件。

无论使用哪种方式使用PostCSS，您都可以仅运行特定目的所需的插件，这意味着您无需拖着任何未使用的功能即可。

快速：快三倍

PostCSS在基准测试中测试速度非常快的主要原因有两个。 一个事实是，如上所述，您只需要加载所需的插件即可。 另一个是它可以在JavaScript上运行。

您可以使用https://github.com/postcss/benchmark自己运行这些基准测试

这些基准之一，测试分析，嵌套规则，mixin，变量和数学的结果是：

PostCSS:   36 ms
Rework:    77 ms   (2.1 times slower)
libsass:   136 ms  (3.8 times slower)
Less:      160 ms  (4.4 times slower)
Stylus:    167 ms  (4.6 times slower)
Stylecow:  208 ms  (5.7 times slower)
Ruby Sass: 1084 ms (30.1 times slower)

您可以为自己想要的任何内容创建自己的插件

PostCSS的插件是用JavaScript编写的，因此，任何可以编写JavaScript的人都可以出于自己的目的创建插件。 为了给您一个主意，我绝对不认为自己是JavaScript的核心开发者，但是发现PostCSS之后，我可以在几个小时内制作出我的第一个功能齐全的插件。

诸如Stylus，Sass和LESS之类的预处理器项目做得很好，但是它们并不能满足所有人的所有要求。 他们必须决定哪些功能最适合整个用户群。 如果您有想要的功能，则可以提出功能请求，但可以将其视为或不认为可以满足项目的更广泛需求。

即使您提出了合适的功能请求，项目的维护者通常还是无偿志愿者，他们可能没有时间来开发它。 因此，如果您不具备自己创建功能的技能水平，那么您就不走运了。

另一方面，使用PostCSS，您不必问任何人。 如果您想要一项新功能，可以继续进行。 根据我的经验，对于许多前端开发人员来说，创建PostCSS插件所需JavaScript经验水平是可管理的。

在本系列的后续教程中，我们将逐步创建基本的PostCSS插件。 即使您不认为自己是JavaScript专家，我认为您也会发现可以实现PostCSS插件的创建。

您可以将其与常规CSS一起使用

大部分PostCSS插件都不需要使用自定义语法，就像预处理器通常那样。 相反，它们可以应用于常规CSS。 这意味着您可以将PostCSS与您拥有的任何CSS文件一起使用，例如前端框架，其他人的项目中的完整样式表或Normalize.css文件。

这也意味着您不会被限制在使用特定预处理器（即Stylus，Sass或LESS）的项目中，因为您始终可以将PostCSS应用于已编译CSS。 例如，如果通过Sass使用Foundation，则可以在生成项目CSS文件后运行优化和将来的语法插件。

PostCSS库没有绑定到一个预处理器

我们也开始看到整个由PostCSS构建的库，这些库过去可能是用Stylus，Sass或LESS编写的。

例如， Cory Simmons最初同时维护了其Lost网格系统的 Stylus和Sass版本，因此两个预处理器的用户都可以访问。 随后，他将项目移植到PostCSS，这意味着现在每个人都可以使用Lost，包括Stylus和Sass用户，还包括LESS用户和根本不使用预处理器的人。

使用流行工具无缝部署

基于CSS的PostCSS不需要安装Ruby，并且已经为多个开发工具进行了现成的集成。

• 有适用于Grunt ， Gulp ， webpack ， Broccoli ， Brunch和ENB的插件。
• CodePen允许您内联使用PostCSS。
• Prepros内置了对Autoprefixer和cssnext插件的支持。
• postcss-use插件可让您轻松在CSS中使用简单的@规则加载其他插件
• 您可以使用“ package.json”文件，因此npm可以通过两个单词命令自动安装项目使用的任何PostCSS插件： npm install 。 尽管插件设置可能有很多变化，但这便于PostCSS项目的轻松共享。

在本系列的“快速入门指南”部分中，我们将介绍如何设置使用PostCSS的方法。

好，让我们回顾一下

您需要知道的第一件事是PostCSSSwift发展，这是有充分的理由的，现在是时候开始建立对它如何帮助您的开发过程的清晰理解了。

在本介绍中，我们介绍了PostCSS不是：

• 它不是预处理器，尽管可以选择像一个预处理器。
• 它不是后处理器，尽管它可以选择像一个后处理器。
• 尽管它可以促进对未来语法的支持，但它与“未来语法”无关
• 尽管它可以提供此类功能，但它不是清理/优化工具。
• 这不是一件事； 这是您选择时可能无限配置的功能的一种方式。

我们还介绍了使PostCSS与众不同的原因：

• 通过其插件生态系统可获得的各种功能
• 其模块化的“按需使用”性质
• 快速编译时间
• 创建自己的插件的可访问性
• 与常规CSS一起使用的选项
• 创建不依赖一个预处理器的库的能力
• 与许多流行的构建工具的无缝部署

参加“ PostCSS深入学习”

在本系列中，我们将通过教程逐步介绍如何开始使用PostCSS：

• 快速入门指南-即时设置选项
  
• 快速入门指南-Gulp设置
• 快速入门指南-Grunt设置
• 快速入门指南-探索插件

从那里，我们将仔细研究教程中使用PostCSS的多种方法：

• 跨浏览器兼容性
• 缩小和优化
• 使用PreCSS进行预处理
• 滚动自己的预处理器
• 结合手写笔/ Sass / LESS
• BEM / SUIT方法CSS
• 快捷方式和速记
• PostCSS杂项

最后，我们将带您创建自己的基本PostCSS插件，以结束本文 。

您可能会注意到明显缺少使用PostCSS来启用将来CSS的教程，尤其是考虑到很多人认为两者几乎是同义词。

暂时缺席的原因是将来CSS的主要插件cssnext似乎即将进行重大转换 ，可能会大大改变使用它的步骤。 因此，我们将密切关注它，并在项目过渡后为您提供新的教程。

让我们开始吧！ 在下一个教程中，我们将直接进入“快速入门指南”，并向您展示开始使用PostCSS的最快方法。 我会在那里见你！

翻译自: https://webdesign.tutsplus.com/tutorials/postcss-deep-dive-what-you-need-to-know--cms-24535