postcss插件开发_PostCSS深入探讨：自行开发预处理器

公孙茂学

2023-12-01

postcss插件开发

在上一教程中，我们介绍了如何使用出色的预处理包“ PreCSS”。在本教程中，我们将以不同的方式进行基于PostCSS的预处理。安装精选的插件以自定义从头开始构建预处理器。

我将带您完成我个人认为是语言扩展插件的绝佳组合的设置。但是，当涉及到滚动自己的预处理器时，您可能选择仅使用我们在此介绍的某些插件，或者您可能根本不选择任何插件，而是选择其他选项。

这就是这个过程的美。您可以选择自己的预处理器。本教程的目的是为您提供组装PostCSS预处理器的经验，并介绍当前可用插件的功能，以便您自己决定要使用的插件。

让我们开始！

设置您的项目

您需要做的第一件事是根据您的喜好将项目设置为使用Gulp或Grunt。如果您没有一个或另一个偏好，我建议您使用Gulp，因为您将需要更少的代码来达到相同的目的。

您可以在之前的教程中了解如何为PostCSS设置Gulp或Grunt项目

分别。

但是，如果您不想从头开始手动设置项目，则可以下载本教程附带的源文件，并将提供的Gulp或Grunt入门项目提取到一个空项目文件夹中。

然后，在终端或命令提示符指向该文件夹的情况下，运行命令npm install 。

插件安装注意事项

本教程将假定您已遵循本系列中的先前文章，并且现在熟悉如何将插件安装到项目中并通过Gulpfile或Gruntfile加载它。

重要！ 在学习过程中，请确保按照本教程中看到的顺序将插件加载到Gulpfile / Gruntfile中。加载顺序在PostCSS中很重要，它可以使一切平稳运行。

添加部分导入

首先要开始的是将我们的自定义预处理器放在一起，就是导入。在之前的有关使用PreCSS 进行缩小和优化以及预处理的教程中，您已经看到@import样式表的PostCSS内联。导入将在此预处理器中使用的方式没有什么不同。

上面我们谈到了加载顺序在PostCSS中很重要的事实，在这里我们找到了第一个示例。我们希望确保第一步都内联所有@import文件，以便我们将项目的所有代码放在一个地方，以便其余插件可以运行。

例如，我们可以将所有变量存储在部分文件中，并使用@import将其引入到主样式表中。如果我们没有运行先内联@import文件的插件，那么我们的变量将不会被导入，因此无法用于其余的处理。

首先，将Gulpfile源文件更改为“ style.css”

因为我们将开始导入局部数据，所以在添加导入功能之前，我们需要对Gulpfile进行一些调整。

注意：如果使用Grunt，则此阶段无需进行任何更改。

目前，我们已经在“ src”文件夹中找到了任何“ .css”文件，但是我们不想意外地编译部分文件。我们将所有内容导入“ style.css”文件，因此它是唯一需要编译的文件。

找到这一行：

return gulp.src('./src/*.css')

...并将其更改为：

return gulp.src('./src/style.css')

使用的导入插件：

Maxime Thirouin撰写的postcss-import： https ： //github.com/postcss/postcss-import

这与我们在“用于缩小和优化”教程中使用的插件相同，并且在PreCSS中也使用了该插件，因此您在这一点上会有点熟悉。

将插件安装到项目中，然后在“ src”文件夹中创建一个名为“ _vars.css”的文件，并向其中添加一些基本测试代码。请注意，我们尚未添加变量功能，因此仅添加一些简单CSS，例如：

.test {
    background: black;
}

现在，通过在第一行添加以下代码，将新的变量文件导入到主“ src / style.css”文件中：

@import "_vars";

编译代码，然后检查“ dest / style.css”文件，您现在应该看到它包含“ _vars.css”文件中的代码。

添加混入

使用的Mixins插件：

Andrey Sitnik撰写的postcss-mixins： https ： //github.com/postcss/postcss-mixins

注意：此插件必须在我们将要使用的postcss-nested和postcss-simple-vars插件之前执行。

继续安装postcss-mixins，然后将以下代码添加到“ src / style.css”文件中：

@define-mixin icon $network, $color {
    .button.$(network) {
    	background-image: url('img/$(network).png');
		background-color: $color;
	}
}

@mixin icon twitter, blue;

编译后，您的“ dest / style.css”应添加以下已编译的代码：

.button.twitter {
    background-image: url('img/twitter.png');
	background-color: blue;
}

我们在这里使用的postcss-mixins插件与PreCSS中使用的插件相同。我们在PreCSS上的教程中介绍了如何使用它，因此，有关其语法的完整详细信息，请查看上一教程的“ Mixins”部分。

其他Mixin插件选项：

Andy Jansson撰写的postcss-sassy-mixins： https ： //github.com/andyjansson/postcss-sassy-mixins

如果您在创建混入文件时希望使用Sass语法，请查看Andy Jansson的postcss-sassy-mixins插件，该插件的功能与postcss-mixins相同，但使用@mixin语法定义一个混入，并使用@include来使用之一。

添加“ for”循环

“ for”循环插件使用：

由Anton Yakushev撰写的postcss-for： https : //github.com/antyakushev/postcss-for

注意： postcss-for插件是另一个必须在postcss-nested和postcss-simple-vars之前执行的插件。

安装postcss-for插件，然后将以下代码添加到“ src / style.css”文件中，以测试其是否按预期工作：

@for $i from 1 to 3 {
    	p:nth-of-type($i) {
		margin-left: calc( 100% / $i );
	}
}

它应该编译为您提供：

p:nth-of-type(1) {
    margin-left: calc( 100% / 1 );
}

p:nth-of-type(2) {
	margin-left: calc( 100% / 2 );
}

p:nth-of-type(3) {
	margin-left: calc( 100% / 3 );
}

同样，我们用来添加@for循环的插件与@for使用的插件相同，因此有关其语法的更多信息，请查看上一教程中的“循环”部分。

其他“ for”循环插件选项：

Anton Yakushev撰写的postcss-for的叉子： https : //github.com/xori/postcss-for

postcss-for插件必须在postcss-simple-vars之前运行，这意味着无法使用变量来设置您希望@for循环迭代的范围。

如果存在问题，则可以改用postcss-for插件的此fork ，而应在 postcss-simple-vars插件之后加载。

因为它在评估变量之后运行，所以您可以随意使用变量来设置要让@for循环迭代的范围，如下所示：

@from: 1;
@count: 3;

@for $i from @from to @count {
    p:nth-of-type($i) {
    	margin-left: calc( 100% / $i );
	}
}

添加变量

我们将在预处理器中添加两种变量，这两种变量都非常方便。第一种使用类似Sass的语法，第二种使用CSS定制属性的语法，也称为CSS变量。

使用的变量插件：

由Andrey Sitnik撰写的postcss-simple-vars： https ： //github.com/postcss/postcss-simple-vars
埃里克·伊斯特伍德（Eric Eastwood）的postcss-css-variables： https ： //github.com/MadLittleMods/postcss-css-variables

安装这两个插件，然后我们将一次测试每个插件。

首先，我们将测试postcss-simple-vars的类似Sass的语法。打开您之前创建的“ _vars.css”文件，删除其内容并添加以下代码：

$default_padding: 1rem;

将以下内容添加到“ src / style.css”文件中并重新编译：

.post {
    padding: $default_padding;
}

它应该编译为您提供：

.post {
    padding: 1rem;
}

现在，我们将测试CSS自定义属性，例如postcss-css-variables的语法。将以下代码添加到“ src / style.css”文件中：

:root {
    --h1_font_size: 3rem;
}

h1 {
	font-size: var(--h1_font_size);
}

@media ( max-width: 75rem ){
	h1 {
		--h1_font_size: 4vw;
	}
}

它应编译为：

h1 {
    font-size: 3rem;
}

@media ( max-width: 75rem ) {

	h1 {
		font-size: 4vw;
	}
}

注意，使用CSS变量时，我们只需要在媒体查询中更改--h1_font_size变量的值，它就会自动输出关联的font-size属性。这是特别有用的功能。

为什么要同时使用两种变量？

在继续之前，我将再次简单地提到，本教程中采用的方法不是您必须采用的方法。如果您要使用一种变量而不是其他变量，那完全可以。

从我的角度来看，我喜欢同时使用两种变量的原因是我以两种不同的方式使用它们。我通常会在主样式表中使用CSS定制属性语法，而在部分文件中使用类似Sass的变量。

如果/当跨浏览器很好地支持它们时，这可以让我为可能在实时项目中实际使用的变量类型设置CSS自定义属性。如您在上面的示例中所见，它们还具有某些类似于Sass变量所没有的功能。

同时，对于不属于实时样式表的内容，我可以使用类似Sass的变量，尤其是那些纯粹存在的东西，可以通过诸如每个循环，条件和其他转换之类的东西进行处理。

其他变量插件选项：

乔纳森·尼尔（Jonathan Neal）的postcss-advanced-variables： https ： //github.com/jonathantneal/postcss-advanced-variables

作为使用postcss-simple-vars的替代方法，您可能想考虑使用postcss-advanced-variables ，该插件用作PreCSS包的一部分。

这也是一个极好的选择，主要区别在于它可以在同一个插件中处理所有条件，循环和变量。对我来说，我目前选择postcss-simple-vars的原因是我更喜欢条件来自单独的插件。 postcss-conditionals，我们将在稍后介绍。

Maxime Thirouin的postcss-custom-properties： https ： //github.com/postcss/postcss-custom-properties

您可能更喜欢postcss-custom-properties ，而不是使用postcss-css-variables。

两者之间的本质区别是postcss-custom-properties严格符合W3C的自定义属性规范，因此您可以确信自己仅编写了正确的将来CSS。另一方面，postcss-css-variables提供了额外的功能，但是这样做并不能声称与规范完全相同。

我个人选择postcss-css-variables，因为我在预处理的上下文中使用了它，无论如何我都会写很多非规范代码。因此，我宁愿添加的功能超过100％的规范合规性。

但是，如果在编写将来CSS时使用变量，则可能会发现postcss-custom-properties更适合您。

添加“每个”循环

使用的“每个”循环插件：

由Alexander Madyankin撰写的postcss-each： https ： //github.com/outpunk/postcss-each

安装postcss-each插件，然后将此变量代码添加到“ _vars.css”文件中：

$social: twitter, facebook, youtube;

这段代码定义了一个列表，存储在$social变量中。

现在，我们将创建一个@each循环以迭代$social变量中存储的值。将此代码添加到您的“ src / style.css”文件中：

@each $icon in ($social){
    .icon-$(icon) {
		background: url('img/$(icon).png');
	}
}

我们的@each循环现在已经准备好了，但是在我们对其进行编译之前，我们需要对postcss-simple-vars的选项进行一些配置更改。

您会注意到，在上面的代码中，我们使用$icon表示我们正在迭代的当前值。由于postcss-simple-vars插件会寻找$符号以识别变量，因此可能会出现一些困难。

这意味着它将看到$icon ，认为它是一个变量，尝试对其进行处理，然后看到它没有值。这将使其停止编译并将发现未定义变量的错误记录到控制台。

为了解决这个问题，我们想在插件选项中添加silent: true选项。这意味着，如果发现未定义的变量，它将不会停止编译以记录错误，它将继续进行下去。因此，它不会被@each循环中的$icon所困扰，并且我们将能够成功进行编译。

在Gulpfile或Gruntfile的处理器数组中，设置以下选项：

/* Gulpfile */
simple_vars({silent: true})

/* Gruntfile */
require('postcss-simple-vars')({silent: true})

现在编译您CSS，您应该得到：

.icon-twitter {
    background: url('img/twitter.png');
}

.icon-facebook {
	background: url('img/facebook.png');
}

.icon-youtube {
	background: url('img/youtube.png');
}

其他“每个”循环插件选项：

乔纳森·尼尔（Jonathan Neal）的postcss-advanced-variables： https ： //github.com/jonathantneal/postcss-advanced-variables

如前所述，postcss-advanced-variables是另一个出色的插件选项，可将变量，循环和条件全部集中处理。

添加条件

使用的条件插件：

Andy Jansson撰写的postcss-conditionals： https ： //github.com/andyjansson/postcss-conditionals

我之前提到过，此插件是我处理条件的首选。这是因为我发现它能够处理更复杂的条件检查。它包括对@else if语法的支持，这意味着您可以在单个代码中针对更多条件进行测试。

安装postcss-conditionals插件后，通过将以下代码添加到您的“ src / style.css”文件中进行测试：

$column_count: 3;

.column {
    @if $column_count == 3 {
		width: 33%;
		float: left;
	} @else if $column_count == 2 {
		width: 50%;
		float: left;
	}	@else {
		width: 100%;
	}
}

这段代码将检查我们在变量@column_count设置的值，并根据找到的内容输出不同的width和float值。它的工作方式与之前的预处理教程中使用的代码相同，但是现在， @else if行能够将要测试的条件数从两个增加到三个，我们就可以使用@else if 。

重新编译后，应该会给您：

.column {
    width: 33%;
	float: left
}

尝试将$column_count更改$column_count 2或1然后再次编译以查看其如何更改CSS输出。

我们还可以在mixin内很好地使用这些类型的条件，我们之前已经为其提供了支持。例如，我们可以创建一个mixin来生成列布局代码，如下所示：

@define-mixin columns $count {
    @if $count == 3 {
		width: 33%;
		float: left;
	} @else if $count == 2 {
		width: 50%;
		float: left;
	}	@else {
		width: 100%;
	}
}

.another_column {
	@mixin columns 2;
}

这将为您提供输出：

.another_column {
    width: 50%;
	float: left;
}

其他条件选项：

乔纳森·尼尔（Jonathan Neal）的postcss-advanced-variables： https ： //github.com/jonathantneal/postcss-advanced-variables

如前所述，postcss-advanced-variables是另一个出色的插件选项，可将变量，循环和条件全部集中处理。

为数学添加Calc（）

使用的Calc（）插件：

Maxime Thirouin撰写的postcss-calc： https ： //github.com/postcss/postcss-calc

在先前的教程中，我们通过cssnano使用postcss-calc来帮助使calc()实例的使用效率更高。但是，在预处理的情况下，无论我们希望在样式表中使用数学运算的任何地方，它都非常有用。

继续安装postcss-calc，然后通过使上面添加的列生成mixin更高效来对其进行测试。

现在，我们使用条件语句来检查混入的$count参数被设置为1 ， 2或3 ，然后输出一个预先计算相应的宽度。取而代之的是，无论通过mixin传递多少数字，我们都将使用calc()为列代码自动输出正确的宽度。

添加到您的“ src / style.css”文件中：

@define-mixin columns_calc $count {
    width: calc( 100% / $count );
	@if $count > 1 {
		float: left;
	}
}

.column_calculated {
    @mixin columns_calc 2;
}

现在，我们可以即时计算它，而不是对某些列数所需的百分比宽度进行硬编码。

postcss-calc插件将转换width: calc( 100% / $count ); 根据我们调用mixin时传递的值，将其转换为静态量，在这种情况下为2 。

重新编译代码，您应该看到以下输出：

.column_calculated {
    width: 50%;
	float: left;
}

注意：只要postcss-calc可以将calc()解析为静态值，它将输出到您的代码中。如果不能，它将保持不变，因此您仍然可以对运行时需要浏览器处理的值使用calc() 。

添加嵌套

使用的嵌套插件：

由Andrey Sitnik嵌套的postcss： https : //github.com/postcss/postcss-nested

对于嵌套，我们使用与PreCSS包中使用的插件相同的插件，因此您可以参考上一教程以获得有关语法的完整信息。

安装postcss-nested，然后通过编译以下代码来测试一切是否正常：

.menu {
  width: 100%;
    a {
		text-decoration: none;
	}
}

生成CSS应该是：

.menu {
    width: 100%;
}

.menu a {
	text-decoration: none;
}

添加扩展

扩展使用的插件：

乔纳森·尼尔（Jonathan Neal）发布的postcss-sass-extend： https ： //github.com/jonathantneal/postcss-sass-extend

对于扩展，我们将使用postcss-sass-extend插件。与我们之前使用PreCSS的教程中介绍的语法相比，它将为我们提供不同的语法使用。不是使用@define-extend extend_name {...}使用%extend_name {...} @define-extend extend_name {...} 。

它们仍然与@extend %extend_name;语法基本相同@extend %extend_name; 。

请注意，postcss-sass-extend插件实际上确实与PreCSS一起提供，但是我认为默认情况下不会加载它，因为当我尝试使用未编译的必需语法时。

将postcss-sass-extend安装到您的项目中之后，请使用以下代码对其进行测试：

%rounded_button {
    border-radius: 0.5rem;
	padding: 1em;
	border-width: 0.0625rem;
	border-style: solid;
}

.blue_button {
	@extend %rounded_button;
	border-color: #2F74D1;
	background-color: #3B8EFF;
}

.red_button {
	@extend %rounded_button;
	border-color: #C41A1E;
	background-color: #FF2025;
}

它应编译为：

.blue_button, .red_button {
  border-radius: 0.5rem;
    padding: 1em;
	border-width: 0.0625rem;
	border-style: solid;
}

.blue_button {
	border-color: #2F74D1;
	background-color: #3B8EFF;
}

.red_button {
	border-color: #C41A1E;
	background-color: #FF2025;
}

其他扩展插件选项：

postcss-extend： https : //github.com/travco/postcss-extend
postcss-simple-extend： https : //github.com/davidtheclark/postcss-simple-extend

附加功能

到目前为止，我们已经介绍了大多数预处理器共有的核心功能。但是，仍然有更多的插件可以提供额外的功能。其中一些功能可以在其他预处理器中找到，而某些功能则必须去PostCSS才能找到。现在，我们将简要介绍这些额外的选项。

色彩处理

外挂程式：

Maxime Thirouin的postcss-color-function： https : //github.com/postcss/postcss-color-function
Ivan Vlasenko撰写的postcss-color-alpha： https : //github.com/avanes/postcss-color-alpha
克里斯托弗·约瑟夫（Kristofer Joseph）的postcss-color-scale： https ： //github.com/kristoferjoseph/postcss-color-scale

调整颜色的能力可能是预处理器中最有用的功能之一。实际上，有几个PostCSS彩色插件，但其中三个在预处理设置中特别适合在家中使用。它们允许进行各种颜色转换，包括变亮，变暗，饱和，添加alpha值等等。

属性定义

插入：

Dale Eidd的postcss-define-property： https : //github.com/daleeidd/postcss-define-property

可以将该插件提供的功能与Stylus的无缝mixins进行比较，从而@mixin使用@mixin类的语法，而是以如下@mixin定义代码块，以便它们随后可以与本地财产，例如

/* Define a property */
size: $size {
  height: $size;
  width: $size;
}

/* Use it like a native property */
.square {
  size: 50px;
}

该插件还可用于重新定义本机属性，以满足您的需求。

属性查询

插入：

Simon Smith的postcss-property-lookup： https : //github.com/simonsmith/postcss-property-lookup

属性查找是Stylus中的一项功能，非常方便。 它允许您从相同样式中查找属性的值。 例如，您可以设置一个右边距以匹配左边margin-left: 20px; margin-right: @margin-left; ： margin-left: 20px; margin-right: @margin-left; margin-left: 20px; margin-right: @margin-left;

嵌套属性

插入：

杰德·毛（Jed Mao）的postcss-nested-props： https : //github.com/jedmao/postcss-nested-props

虽然我们在上面介绍的常规嵌套打开了包装选择器，但postcss-nested-props插件打开了嵌套属性，例如：

/* Origincal code */
.element {
    border: {
        width: 1px;
        style: solid;
        color: #ccc;
    }
}

/* After processing */
.element {
    border-width: 1px;
    border-style: solid;
    border-color: #ccc;
}

匹配

插入：

曹瑞恩的postcss-match： https : //github.com/rtsao/postcss-match

匹配为您提供了另一种执行条件检查的方式，这次使用Rust，例如模式匹配，类似于JavaScript或PHP中的switch语句。与编写许多@if else检查相比，这可以为您提供一种更有效的方法来检查多个条件。

CSS Sprite生成

插入：

Viktor Vasilev撰写的postcss-sprites： https : //github.com/2createStudio/postcss-sprites

CSS Sprite生成（Compass中的一个流行功能）也可以通过postcss-sprites插件来完成。该插件将扫描您CSS中的图像，将这些图像合并到一个Sprite表中，并根据需要更新您的代码，以便正确地从新Sprite表中显示。

还有更多选择

当前有一个非常强大的语言扩展插件列表可供选择，超出了我们在此处可以覆盖的范围，因此请在以下位置查看完整列表： https : //github.com/postcss/postcss#language-extensions

即将推出：替代语法

对于许多人来说，以简洁高效的语法（通常是无分号和花括号）书写的能力是预处理器（如Stylus或Sass）的一大吸引力。新发布的PostCSS 5.0版现在支持自定义解析器，这将支持新语法。 SugarSS将成为简洁的语法分析器，目前正在讨论如何构造该语法。

您可以随时添加自己的

PostCSS仍然是相对较新的，您可能会发现需要使用自定义预处理器实现一些功能，而目前没有此插件。这个模块化生态系统的优点在于，您可以选择通过创建自己的插件自行解决该问题。任何人都可以做到，并且进入的障碍比您尝试将自己的功能添加到Stylus，Sass或LESS时要低得多。我们将在以后的教程中学习如何操作。

在下一个教程中

如果要使用PostCSS，则不必在PreCSS和滚动自己的预处理器之间进行选择。如果您愿意，实际上您可以完全不选择任何基于PostCSS的预处理，而是与您喜欢的预处理器并列使用。

在下一个教程中，我们将学习如何将StCSS与Stylus，Sass或LESS结合使用。到时候那里见！

翻译自: https://webdesign.tutsplus.com/tutorials/postcss-deep-dive-roll-your-own-preprocessor--cms-24584