css 插件_10个很棒的PostCSS插件，使您成为CSS向导

PostCSS是一种功能强大的工具，可以使用JavaScript插件转换CSS样式 。 它的灵活性在于其构建方式。

PostCSS的核心部分是一个Node.js模块 ，您可以使用npm进行安装，它具有一个生态系统，其中包含200多个插件，您可以选择在项目中使用。

PostCSS既不是预处理器，也不是后处理器，因为不同的PostCSS插件可能属于这两个类别，或者属于这两个类别。 这完全取决于您自己的能力。 使用PostCSS，您无需学习其他语法，例如Sass或LESS ； 您可以立即开始使用它。

PostCSS会获取您现有CSS文件并将其转换为JavaScript可读的数据，然后由JavaScript插件执行修改，然后PostCSS返回原始文件的更改版本。 听起来不错，不是吗？

在本文中，我们将介绍10个PostCSS插件， 让您深入了解使用此超赞工具可以实现的一些出色功能 。

1.

Autoprefixer可能是最著名的PostCss插件，因为Google，Twitter和Shopify等著名的技术公司都在使用它。 必要时，它将供应商前缀添加到CSS规则 。

Autoprefixer使用“ 我可以使用”中的数据。 这样，它就不会过时，并且可以始终应用最新规则。 您可以在其交互式演示站点上查看其工作方式。

2.

CSSnext是CSS编译器， 可让您在当前站点上使用将来CSS语法 。 W3C拥有许多浏览器当前尚未实现的新CSS规则，但可以使开发人员更快，更轻松地编写更复杂CSS。 CSSnext可以弥补这一差距。

值得一看的是它的功能以了解您可以完成的工作，例如，可以在设计中使用自定义媒体查询，自定义选择器，颜色修改器，SVG过滤器和新的伪类 。

3.

PreCSS是PstCSS插件之一，可以像CSS预处理器一样工作。 这样就可以在sytlesheet文件中利用类似Sass的标记 。

通过引入PreCSS到您的工作流程，你可以使用变量， if-else语句， for循环，混入， @extend和@import规则，嵌套等诸多便捷功能在你CSS代码。 PreCSS的Github文档为您提供了有关如何充分利用它的详细说明。

4.

StyleLint是现代CSS linter ，用于校对和验证您CSS代码。 它可以轻松避免错误，并促使您遵循一致的编码约定。

StyleLint理解最新CSS语法，因此可以与前面提到的PreCSS插件一起使用。 它还允许您进行自己的配置，甚至检查您的设置是否有效。

5.

PostCSS Assets插件是CSS文件的便捷资产管理器 。 如果您倾向于在URL路径上遇到麻烦，这是一个不错的选择，因为PostCSS Assets可以将样式表文件与环境变化隔离开来。

您需要定义加载路径，相对路径和基本路径，插件将自动查找所需的资产。 例如，如果您需要foobar.jpg图片的正确URL，则可以编写以下代码：

body {
 background: resolve('foobar.jpg');
}

PostCSS Assets还负责资产缓存 ，因为如果您希望在修改资产的情况下自动更改URL路径，可以将cachebuster变量设置为true。 这个智能插件还可以计算图像文件的尺寸（宽度和高度），甚至可以使用预设比例调整它们的大小。

6.

如果您需要针对生产站点进行优化和缩小CSS文件，则值得查看CSSNano 。 它是一个模块化插件，由许多较小的，单一职责的PostCSS插件组成。 它不仅执行基本的最小化技术（例如删除空格），而且还具有使集中优化成为可能的高级选项。

除了许多其他功能外，CSSNano还能重新设置z-index值，减少自定义标识符，转换长度，时间和颜色值以及删除过时的供应商前缀。

7.

如果您喜欢复杂的字体，您一定会喜欢Font Magician PostCSS插件。 字体魔术师的魔力在于它能够自动生成所有必要的@font-face规则的能力 。

它的工作原理非常简单，您只需添加font-family: "My Fav Font"; 将CSS规则定义为HTML元素，剩下的工作就是Font Magician。 它可以添加Google字体，字体的本地副本，Bootstrap字体，还可以异步加载字体。 这是其交互式演示站点 。

8.

您是否曾经想过将SVG直接写入CSS文件有多酷？ 借助Write SVG PostCSS插件，您可以轻松实现此目标。

例如，这个方便的插件可以将SVG背景和图标存储在CSS文件中 ，然后通过以下方式将它们添加到相关HTML元素中：

@svg square {
 @rect {
  fill: var(--color, black);
  width: 100%;
  height: 100%;
 }
}

.example {
 background: white svg(square param(--color #00b1ff)) cover;
}

9.

Lost Grid是一个很棒的PostCSS插件，可为您提供令人印象深刻的CSS网格系统 ，该系统不仅适用于普通CSS，而且还适用于预处理程序语言 （Sass，LESS，Stylus）。 它使用calc() CSS函数创建漂亮的网格 ，您可以轻松使用它们，而无需花费太多时间进行自定义。

失落的网格具有非常简单的规则，例如，定义宽度为25％的列所花的代码片段不多：

div {
 lost-column: 1/4;
}

10.

PostCSS Sprite插件使生成图像sprite变得容易，即将图像集合放置到单个文件中。 设置一些选项后，插件将从样式表文件中获取图像，将其合并为sprite，然后在需要时更新图像引用。

您可以使用不同的滤镜和分组器来确定要将哪些图像放入精灵中，还可以设置输出图像的尺寸。

翻译自: https://www.hongkiat.com/blog/postcss-plugins/