PostCSS深入研究：使用“ PreCSS”进行预处理

在最后两个教程中，我们研究了在完成的样式表上使用PreCSS来增强其跨浏览器兼容性和优化的方法，实质上是作为后处理器。在本教程中，您将学习使用PostCSS作为预处理器，就像使用Stylus，Sass或LESS一样。

使用PostCSS进行预处理的主要方法有两种。一种是选择您自己的所有插件以添加所需的预处理器功能，另一种是安装一包预选的插件，以便您可以立即使用。

我们将以最快，最简单的方法开始，安装由乔纳森·尼尔（Jonathan Neal）创建的出色的PreCSS插件包。在此之后的教程中，我们将继续介绍如何仅使用所需的功能来组合自己的预处理器。

本教程将假定您对预处理器（如Stylus，Sass或LESS）中常见的功能有所了解。这纯粹是因为我们将重点介绍如何可以通过PostCSS使用相同类型的功能，而不是什么功能实际上做。就是说，即使您以前从未使用过预处理器，也可能是一个理想的起点。

试用PreCSS Live

在下一节中，我们将介绍如何使用PreCSS设置Gulp或Grunt项目，但是，如果您想使用一个快捷方式，（现在），您可以选择使用Live Demo Playground来尝试代码。我们将在本教程中进行介绍。可以在左侧窗口中键入代码，它会自动为您编译并显示在右侧窗口中。

设置您的项目

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

您可以在之前的教程中阅读有关如何为PostCSS设置Gulp或Grunt项目的信息

PostCSS快速入门指南：Gulp设置或
PostCSS快速入门指南：Grunt设置

分别。

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

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

安装PreCSS

无论您使用的是Gulp还是Grunt，都可以使用以下命令将PreCSS安装到项目中：

1	npm install precss --save-dev

作为Gulp插件加载

如果您使用的是Gulp，请将此变量添加到文件中已存在的变量下：

1	var precss = require('precss');

现在，将新的变量名称添加到processors数组中：

1
2
3

var processors = [
precss
];

通过运行gulp css命令，然后检查项目的“ dest”文件夹中是否出现了新的“ style.css”文件，来快速测试一切是否正常。

加载为Grunt插件

如果您使用的是Grunt，请将嵌套在options对象下的processors对象更新为以下内容：

1
2
3

processors: [
require('precss')()
]

通过运行grunt postcss命令，然后检查项目的“ dest”文件夹中是否出现了新的“ style.css”文件，来快速测试一切是否正常。

现在，您已经拥有使用PreCSS所需的一切，并可以使用。这意味着我们准备开始逐步了解PreCSS的一些预处理功能以及如何使用它们。

通过“ PreCSS”进行预处理

一般来说，PreCSS语法与Sass最相似。但是，它确实使用了一些自己独特的方法，我们将逐步介绍这些方法。

注意：由于PreCSS的语法类似于Sass，因此您会发现Sass语法突出显示器在您喜欢的文本编辑器中最适合您。

套料

嵌套是所有三个主要预处理器（即Stylus，Sass和LESS）的共同点，并且在PreCSS中也存在。通过将选择器放置在其他选择器的花括号内，以与Sass和LESS中相同的方式在PreCSS中进行嵌套。

使用&符号将父选择器复制到子选择器中的功能在PreCSS中的工作方式也与在其他预处理器中相同。

尝试将以下嵌套代码添加到“ src / style.css”文件中：

1
2
3
4
5
6
7
8
9

.menu {
width: 100%;
a {
text-decoration: none;
}
&::before {
content: '';
}
}

使用grunt postcss gulp css或grunt postcss编译CSS，并且您的“ dest / style.css”文件应已将嵌套代码评估为以下代码：

1
2
3
4
5
6
7
8
9
10
11

.menu {
width: 100%;
}

.menu a {
text-decoration: none;
}

.menu::before {
content: '';
}

变数

变量是所有预处理器共有的另一种功能，它们包含在PreCSS中。每个预处理器之间通常唯一不同的是表示变量的语法。

LESS变量以@符号开头，并在值前放置: 。
手写笔变量可以选择使用$符号，并在值前放置=符号。
Sass变量使用$符号并在值前放置: 。

在与PreCSS倾向使用无礼的语法一致，它也放置一个$变量名和前:前值。

通过将其添加到“ src / style.css”文件中来尝试使用PreCSS变量：

1
2
3
4
5

$text_color: #232323;

body {
color: $text_color;
}

重新编译后，您应该看到以下结果代码：

1
2
3

body {
color: #232323;
}

有条件的

有条件的（即if和else逻辑）是Sass和Stylus都非常强大的功能。 LESS提供了受保护的mixin ，但它们提供的功能不尽相同。条件条件存在于PreCSS中，并使用@if和@else遵循与Sass相同的语法。

将此示例代码添加到您的“ src / style.css”文件中：

1
2
3
4
5
6
7
8
9
10

$column_layout: 2;

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

1	在上面的示例中，根据需要的是一列布局还是两列布局，我们有不同的<wyn>.column</wyn>类输出。我们将<wyn>$column_layout</wyn>变量设置为<wyn>2</wyn> ，这意味着我们应该看到<wyn>width: 50%; float: left;</wyn> <wyn>width: 50%; float: left;</wyn>输出到我们班上。

编译文件，然后在“ dest / style.css”文件中看到以下内容。

1
2
3
4

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

注意：提供此条件功能的postcss-advanced-variables插件仍然很新，在将其用于更复杂的条件时，我遇到了一些意外的输出，但是，我相信它将在不久的将来进行更新。

有一个替代插件可用于名为postcss-conditionals的条件。在下一个教程“滚动自己的预处理器”中，我们将介绍如何使用该插件（如果选择）。

循环- @for和@each

PreCSS中有两种类型的循环，@ @for和@each循环。两者都使用类似于Sass的方法。 “ For”循环可让您循环浏览数字计数器，而“每个”循环可让您循环浏览项目列表。

@for循环

在@for循环中，有一个“计数器”变量，用于跟踪您在数字计数器中循环的位置，通常将其设置为$i 。例如，当从1迭代到3时，将有3个循环。第一个$i等于1 ，第二个$i等于2 ，第三个$i等于3 。

这个$i计数器变量可以插值到选择器和规则中，这对于生成nth-of-type()规则和计算宽度很方便。

将此代码添加到您的“ src / style.css”文件中，以尝试@for循环：

1
2
3
4
5

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

编译后，您应该看到此代码扩展为：

1
2
3
4
5
6
7
8
9
10
11

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 );
}

注意：数字1 ， 2和3已经被插入到上述的每个样式。

@each循环

@each循环遍历项目列表而不是数字。与@for循环一样，可以将代表循环当前项目的变量插入到选择器和规则中。请注意，要插入到字符串中，您需要以$(var)格式在变量名称中插入一组括号。

通过添加以下示例代码，使用PreCSS @each循环运行：

1
2
3
4
5
6
7

$social: twitter, facebook, youtube;

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

编译后，您应该看到已生成以下CSS：

1
2
3
4
5
6
7
8
9
10
11

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

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

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

混合蛋白

mixin创建的语法是PreCSS的一方面，与Sass有点不同。

在Sass中，要定义混合，请使用语法@mixin mixin_name($arg1, $arg2) {...} ，然后将其与@include mixin_name(pass_arg1, pass_arg2); 。

另一方面，在PreCSS中，您可以使用语法@define-mixin mixin_name $arg1, $arg2 {...}定义一个mixin，并与@mixin mixin_name pass_arg1, pass_arg2; 。

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

1
2
3
4
5
6
7
8
9
10

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

@mixin icon twitter, blue;

@mixin icon youtube, red;

在编译时，您应该看到：

1
2
3
4
5
6
7
8
9

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

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

注意：通过mixin传递的参数可以使用与@each循环中提到的方法相同的方法插值到选择器和字符串中。格式$(var) 。

使用@ mixin-content

除了以上述方式使用混合器之外，还可以将它们设置为使用在调用混合器时传递的内容块。这基本上与Sass的@content 。

例如，修改以上示例中的mixin，将@mixin-content放置在要显示传递的内容块的位置，如下所示：

1
2
3
4
5
6
7

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

使用带有@mixin-content ，必须将其放在大括号中，而不是放在以;结尾的一行上; ，否则将无法编译。

更新您的代码，以便您的mixin调用如下所示：

1
2
3
4
5
6
7

@mixin icon twitter, blue {
width: 3rem;
}

@mixin icon youtube, red {
width: 4rem;
}

编译后，这将产生以下代码-请注意，每次使用mixin时都包含了width内容：

1
2
3
4
5
6
7
8
9
10
11

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

.button.youtube {
background-image: url('img/youtube.png');
background-color: red;
width: 4rem;
}

延伸

从某种意义上说，扩展与混合是相似的，因为它们旨在允许您重用代码块。但是，“扩展”背后的想法是创建一个基本代码集，您知道该代码将完全相同的方式用于某种类型的元素。随后，您可以使用其他非默认代码在此基础上扩展。

在PreCSS中，定义扩展的语法为@define-extend extend_name {...} 。

在您的“ src / style.css”文件中，定义一个扩展，其中包含圆形按钮的基本样式，如下所示：

1
2
3
4
5
6

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

现在可以使用额外的代码扩展此默认样式集，例如，设置诸如background-color和border-color 。这是通过使用@extend extend_name;语法@extend extend_name; 导入扩展中定义的基本样式。

在您刚刚添加的代码下方添加以下示例代码：

1
2
3
4
5
6
7
8
9
10
11

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

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

其中@extend rounded_button; 使用line时，将插入扩展的全部内容。

编译样式，您应该得到：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

.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;
}

还要注意， .blue_button和.red_button类通用的样式已合并使用，以提高效率。

进口货

通过@import用于内联样式表的插件与本系列上一教程中介绍的插件相同：用于缩小和优化。有关其工作原理的摘要，请阅读标题为“使用@import内联/合并文件”的小节。

在将PostCSS用作预处理程序的情况下，导入变得更加有用，因为它们使您可以选择设置局部，这可能是其他预处理解决方案所习惯的。例如，您可以设置一个“ partials”文件夹，将您的项目分成逻辑上离散的部分文件，然后像这样导入它们：

1
2
3
4

@import "partials/_variables.css";
@import "partials/_utilities.css";
@import "partials/_mixins.css";
@import "partials/_extends.css";

回顾一下

我希望您现在对通过PreCSS包实现PostCSS作为预处理器的功能有一些了解。总结一下我们上面介绍的内容：

您可以在https://jonathantneal.github.io/precss上试用PreCSS。
在PreCSS中嵌套与Sass和LESS的工作方式相同。
PreCSS中的变量使用与Sass相同的语法。
PreCSS中使用语法@if和@else来提供条件。
@for和@each循环可用。
PreCSS mixin使用以下语法定义：
@define-mixin mixin_name $arg1, $arg2 {...}
PreCSS mixin与以下语法一起使用：
@mixin mixin_name pass_arg1, pass_arg2;
@mixin-content使用方式与Sass的@content相同
PreCSS中的扩展使用以下语法定义：
@define-extend extend_name {...}
扩展与语法一起使用：
@extend extend_name;
@import联外部CSS文件，对于使用局部文件特别有用

在下一个教程中

PreCSS是一个很棒的项目，它汇集了一些出色的语言扩展插件，并使基于PostCSS的预处理几乎即插即用。它提供了大多数预处理器用户所期望的几乎所有功能，并且是使PostCSS预处理器快速发展的一种快速，“简便”的方法。

使用PreCSS是我们在本教程开始时提到的PostCSS预处理的两种方法之一。另一种方法是设置您自己的预处理器，手动选择适合您自己的项目或编码样式的语言扩展插件。折衷是要多设置一些，但是作为回报，您可以自由地组合一个可以工作的预处理器，但是您希望这样做。

您将在下一个教程“滚动自己的预处理器”中学习如何执行此操作。

翻译自: https://webdesign.tutsplus.com/tutorials/postcss-deep-dive-preprocessing-with-precss--cms-24583