postcss安装和使用
postcss安装和使用
一、postcss简介
是一个用 JavaScript 工具和插件转换 CSS 代码的工具
PostCSS 本身是一个功能比较单一的工具。它提供了一种方式用 JavaScript 代码来处理 CSS。它负责把 CSS 代码解析成抽象语法树结构（Abstract Syntax Tree，AST），再交由插件来进行处理。插件基于 CSS 代码的 AST 所能进行的操作是多种多样的，比如可以支持变量和混入（mixin），增加浏览器相关的声明前缀，或是把使用将来的 CSS 规范的样式规则转译（transpile）成当前的 CSS 规范支持的格式。从这个角度来说，PostCSS 的强大之处在于其不断发展的插件体系。目前 PostCSS 已经有 200 多个功能各异的插件。开发人员也可以根据项目的需要，开发出自己的 PostCSS 插件。
PostCSS 从其诞生之时就带来了社区对其类别划分的争议。这主要是由于其名称中的 post，很容易让人联想到 PostCSS 是用来做 CSS 后处理（post-processor）的，从而与已有的 CSS 预处理（pre-processor）语言，如 SASS 和 LESS 等进行类比。实际上，PostCSS 的主要功能只有两个：第一个就是前面提到的把 CSS 解析成 JavaScript 可以操作的 AST，第二个就是调用插件来处理 AST 并得到结果。因此，不能简单的把 PostCSS 归类成 CSS 预处理或后处理工具。PostCSS 所能执行的任务非常多，同时涵盖了传统意义上的预处理和后处理。PostCSS 是一个全新的工具，给前端开发人员带来了不一样的处理 CSS 的方式。
总的来说：PostCSS是一个使CSS更容易，更灵活，更快速工作的工具。PostCSS 不是 一个“真正的”预处理器。PostCSS相当于一个CSS解析器，框架或API，它允许我们使用可以完成各种任务的插件。 它本身没有任何插件，为了更改原始 CSS，我们必须添加至少一个插件。
二、postcss的安装
- 安装 node.js
安装 postcss 之前必须先安装node.js
Node.js概述与安装和运行
https://pythonlaolv.blog.csdn.net/article/details/136512043
- 安装 postcss
安装命令如下：
cnpm install postcss –g
三、postcss的常用插件和使用
Autoprefixer 插件
最著名的PostCss插件，因为Google，Twitter和Shopify等著名的技术公司都在使用它。 必要时，它将供应商前缀添加到CSS规则 。
Autoprefixer使用“ 我可以使用”中的数据。 这样，它就不会过时，并且可以始终应用最新规则。 您可以在其交互式演示站点上查看其工作方式。
标准的 CSS 弹性盒模型的 display 属性声明
#content {
display: flex;
}
使用 Autoprefixer 处理之后的 CSS
#content {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
CSSnext 插件
CSS编译器， 可让您在当前站点上使用将来CSS语法 。 W3C拥有许多浏览器当前尚未实现的新CSS规则，但可以使开发人员更快，更轻松地编写更复杂CSS。 CSSnext可以弥补这一差距。
值得一看的是它的功能以了解您可以完成的工作，例如，可以在设计中使用自定义媒体查询，自定义选择器，颜色修改器，SVG过滤器和新的伪类 。
CSS 自定义属性和变量
:root {
--text-color: black;
}
body {
color: var(--text-color);
}
经过 cssnext 转换之后的 CSS 代码
body {
color: black;
}
PreCSS 插件
PstCSS插件之一，可以像CSS预处理器一样工作。 这样就可以在sytlesheet文件中利用类似Sass的标记 。
通过引入PreCSS到您的工作流程，你可以使用变量， if-else语句， for循环，混入， @extend和@import规则，嵌套等诸多便捷功能在你CSS代码。 PreCSS的Github文档为您提供了有关如何充分利用它的详细说明。
StyleLint 插件
现代CSS linter ，用于校对和验证您CSS代码。 它可以轻松避免错误，并促使您遵循一致的编码约定。
StyleLint理解最新CSS语法，因此可以与前面提到的PreCSS插件一起使用。 它还允许您进行自己的配置，甚至检查您的设置是否有效。
PostCSS Assets 插件
CSS文件的便捷资产管理器 。 如果您倾向于在URL路径上遇到麻烦，这是一个不错的选择，因为PostCSS Assets可以将样式表文件与环境变化隔离开来。
您需要定义加载路径，相对路径和基本路径，插件将自动查找所需的资产。 例如，如果您需要foobar.jpg图片的正确URL，则可以编写以下代码：
body {
background: resolve('foobar.jpg');
}
PostCSS Assets还负责资产缓存 ，因为如果您希望在修改资产的情况下自动更改URL路径，可以将cachebuster变量设置为true。 这个智能插件还可以计算图像文件的尺寸（宽度和高度），甚至可以使用预设比例调整它们的大小。
CSSNano 插件
针对生产站点进行优化和缩小CSS文件， 它是一个模块化插件，由许多较小的，单一职责的PostCSS插件组成。 它不仅执行基本的最小化技术（例如删除空格），而且还具有使集中优化成为可能的高级选项。
除了许多其他功能外，CSSNano还能重新设置z-index值，减少自定义标识符，转换长度，时间和颜色值以及删除过时的供应商前缀。
Font Magician PostCSS 插件
如果您喜欢复杂的字体，您一定会喜欢Font Magician PostCSS插件。 字体魔术师的魔力在于它能够自动生成所有必要的@font-face规则的能力 。
它的工作原理非常简单，您只需添加font-family: “My Fav Font”; 将CSS规则定义为HTML元素，剩下的工作就是Font Magician。 它可以添加Google字体，字体的本地副本，Bootstrap字体，还可以异步加载字体。 这是其交互式演示站点 。
Write SVG PostCSS 插件
将SVG直接写入CSS文件
例如，这个方便的插件可以将SVG背景和图标存储在CSS文件中 ，然后通过以下方式将它们添加到相关HTML元素中：
@svg square {
@rect {
fill: var(--color, black);
width: 100%;
height: 100%;
}
}
.example {
background: white svg(square param(--color #00b1ff)) cover;
}
Lost Grid 插件
一个很棒的PostCSS插件，可为您提供令人印象深刻的CSS网格系统 ，该系统不仅适用于普通CSS，而且还适用于预处理程序语言 （Sass，LESS，Stylus）。 它使用calc() CSS函数创建漂亮的网格 ，您可以轻松使用它们，而无需花费太多时间进行自定义。
失落的网格具有非常简单的规则，例如，定义宽度为25％的列所花的代码片段不多：
div {
lost-column: 1/4;
}
PostCSS Sprite 插件
使生成图像sprite变得容易，即将图像集合放置到单个文件中。 设置一些选项后，插件将从样式表文件中获取图像，将其合并为sprite，然后在需要时更新图像引用。
您可以使用不同的滤镜和分组器来确定要将哪些图像放入精灵中，还可以设置输出图像的尺寸。
四、postcss官方资源
对于 CSS 的处理一直都是 Web 开发中的一个复杂问题，其中一部分来源于 CSS 规范，一部分来源于不同浏览器实现带来的兼容性问题。PostCSS 为处理 CSS 提供了一种新的思路。通过 PostCSS 强大的插件体系，可以对 CSS 进行各种不同的转换和处理，从而尽可能的把繁琐复杂的工作交由程序去处理，而把开发人员解放出来。
postcss官网
https://postcss.org/
postcss文档
https://postcss.org/docs/
postcss插件
https://www.postcss.parts/
postcss API
https://postcss.org/api/
👨💻博主Python老吕说：如果您觉得本文有帮助，辛苦您🙏帮忙点赞、收藏、评论，您的举手之劳将对我提供了无限的写作动力！🤞
🔥精品付费专栏:(暂时免费，尽快订阅、收藏哦)🔥
《跟老吕学Python编程》
《跟老吕学Python编程·附录资料》
🌐前端:
《跟老吕学HTML》
《XHTML》
《CSS》
《JavaScript》
《Vue》
💻后端:
《跟老吕学C语言》
《C++》
《Java》
《R》
《Ruby》
《PHP》
《Go》
《C#》
《Swift》
《Python》
💾数据库:
《跟老吕学Oracle语言》
《MYSQL》
《SQL》
《PostgreSQL》
《MongoDB》