vue使用postcss
在最后两个 教程中，我们研究了在完成的样式表上使用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项目
分别。
但是，如果您不想从头开始手动设置项目，则可以下载本教程附带的源文件 ，并将提供的Gulp或Grunt入门项目提取到一个空项目文件夹中。
然后，在终端或命令提示符指向该文件夹的情况下，运行命令npm install 。
安装PreCSS
无论您使用的是Gulp还是Grunt，请使用以下命令将PreCSS安装到项目中：
npm install precss --save-dev作为Gulp插件加载
如果您使用的是Gulp，请将此变量添加到文件中已存在的变量下：
var precss = require('precss'); 现在，将新的变量名称添加到processors数组中：
var processors = [
precss
]; 通过运行gulp css命令，然后检查项目的“目标”文件夹中是否已出现新的“ style.css”文件，来快速测试一切是否正常。
加载为Grunt插件
如果您使用的是Grunt，请将嵌套在options对象下的processors对象更新为以下内容：
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”文件中：
.menu {
width: 100%;
a {
text-decoration: none;
}
&::before {
content: '';
}
} 使用grunt postcss gulp css或grunt postcss编译CSS，并且您的“ dest / style.css”文件应已将嵌套代码评估为以下代码：
.menu {
width: 100%;
}
.menu a {
text-decoration: none;
}
.menu::before {
content: '';
}变数
变量是所有预处理器共有的另一种功能，它们包含在PreCSS中。 每个预处理器之间通常唯一不同的是表示变量的语法。
- LESS变量以
@符号开头，并在值前放置:。 - 手写笔变量可以选择使用
$符号，并在值前放置=符号。 - Sass变量使用
$符号并在值前放置:。
在与PreCSS倾向使用无礼的语法一致，它也放置一个$变量名和前:前值。
通过将其添加到“ src / style.css”文件中，尝试使用PreCSS变量：
$text_color: #232323;
body {
color: $text_color;
}重新编译后，您应该看到以下结果代码：
body {
color: #232323;
}有条件的
有条件的（即if和else逻辑）是Sass和Stylus都非常强大的功能。 LESS提供了受保护的mixin ，但是它们提供的功能不尽相同。 条件条件存在于PreCSS中，并使用@if和@else遵循与Sass相同的语法。
将此示例代码添加到您的“ src / style.css”文件中：
$column_layout: 2;
.column {
@if $column_layout == 2 {
width: 50%;
float: left;
} @else {
width: 100%;
}
}在上面的示例中，根据需要的是一列布局还是两列布局，我们有不同的.column类输出。 我们将$column_layout变量设置为2，这意味着我们应该看到width: 50%; float: left;width: 50%; float: left;输出到我们班上。
编译文件，然后在“ dest / style.css”文件中看到以下内容。
.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循环：
@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 );
} 注意 ：数字1 ， 2和3已经被插入到上述的每个样式。
@each循环
@each循环遍历项目列表而不是数字。 与@for循环一样，可以将代表循环当前项目的变量插入到选择器和规则中。 请注意，要插入到字符串中，您需要以$(var)格式在变量名称中插入一组括号。
通过添加以下示例代码，使用PreCSS @each循环运行：
$social: twitter, facebook, youtube;
@each $icon in ($social){
.icon-$(icon) {
background: url('img/$(icon).png');
}
}编译后，您应该看到已生成以下CSS：
.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”文件中：
@define-mixin icon $network, $color {
.button.$(network) {
background-image: url('img/$(network).png');
background-color: $color;
}
}
@mixin icon twitter, blue;
@mixin icon youtube, red;在编译时，您应该看到：
.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放置在要显示传递的内容块的位置，如下所示：
@define-mixin icon $network, $color {
.button.$(network) {
background-image: url('img/$(network).png');
background-color: $color;
@mixin-content;
}
} 当使用带有@mixin-content ，必须将其放在大括号中，而不是放在以;结尾的一行上; ，否则将无法编译。
更新您的代码，以便您的mixin调用如下所示：
@mixin icon twitter, blue {
width: 3rem;
}
@mixin icon youtube, red {
width: 4rem;
} 编译之后，这将产生以下代码-请注意，每次使用mixin时都包含了width内容：
.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”文件中，定义一个扩展，其中包含圆形按钮的基本样式，如下所示：
@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; 导入扩展中定义的基本样式。
在您刚刚添加的代码下方添加以下示例代码：
.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时，将插入扩展的全部内容。
编译样式，您应该得到：
.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”文件夹，将您的项目分成逻辑上离散的部分文件，然后像这样导入它们：
@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
vue使用postcss