整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
ostCSS 是使用 javascript 插件转换 CSS 的后处理器。PostCSS 本身不会对你的 CSS 做任何事情，你需要安装一些 plugins 才能开始工作。这不仅使其模块化，同时功能加强。
cssnext 是一个 CSS transpiler，允许你使用最新的 CSS 语法。cssnext 把新 CSS 规范转换成兼容性更强的 CSS，所以不需要等待各种浏览器的支持。
PostCSS 的工作原理就是解析 CSS 并将其转换成一个 CSS 的节点数，这可以通过 javascript 来控制，然后返回修改后的树并保存。它与 Sass（预处理器）的工作原理不同，你基本上是用一种不同的语言来编译 CSS。
为了简单的方式解释预处理和后处理的不同，这里以单位转换为例。当书写 Sass 时，我们可以用函数px转换成rem：
/* input */
.selector { margin-bottom: rem(20px); }
/* output, assuming base font size is 1rem */
.selector { margin-bottom: 1.25rem; }
这种方式节省了我们手工计算的时间。不过通过 PostCSS，我们能够做的更好。因为是后处理的缘故，我们不需要任何函数来编译 CSS。我们可以直接书写px，它可以自动地转换成rem。
/* input */
.selector { margin-bottom: 20px; }
/* output, assuming base font size is 1rem */
.selector { margin-bottom: 1.25rem; }
PostCSS 会在每一个px值出现并运行计算之前处理声明，将其转换成rem的值。
cssnext 包含了大量的新特性：
自动添加（以及删除过时/没用的前缀），由 autoprefixer 实现
自定义属性的当前转换旨在提供一种限定在:root选择器中、面向未来的、由原生 CSS 自定义属性提供的新特性。
使用特性：
:root {
--mainColor: red;
}
a {
color: var(--mainColor);
}
允许你在已命名的自定义属性中存储一套变量，然后在其他类型规则中引用它。
:root {
--danger-theme: {
color: white;
background-color: red;
};
}
.danger {
@apply --danger-theme;
}
使用优化预分析 var() 引用来允许你更安全的用 calc() 使用自定义变量
:root {
--fontSize: 1rem;
}
h1 {
font-size: calc(var(--fontSize) * 2);
}
一个更好的方法来实现语义化的媒体查询
@custom-media --small-viewport (max-width: 30em);
/* check out media queries ranges for a better syntax !*/
@media (--small-viewport) {
/* styles for small viewport */
}
允许用 <= 和 >=来取代min和max
@media (width >= 500px) and (width <= 1200px) {
/* your styles */
}
/* or coupled with custom media queries */
@custom-media --only-medium-screen (width >= 500px) and (width <= 1200px);
@media (--only-medium-screen) {
/* your styles */
}
允许你创造自己的选择器
@custom-selector :--button button, .button;
@custom-selector :--enter :hover, :focus;
:--button {
/* styles for your buttons */
}
:--button:--enter {
/*
hover/focus styles for your button
Read more about :enter proposal
http://discourse.specifiction.org/t/a-common-pseudo-class-for-hover-and-focus/877
*/
}
允许你使用嵌套选择器
a {
/* direct nesting (& MUST be the first part of selector)*/
& span {
color: white;
}
/* @nest rule (for complex nesting) */
@nest span & {
color: blue;
}
/* media query automatic nesting */
@media (min-width: 30em) {
color: yellow;
}
}
允许你根据不同的用户设备来提供不同的图片解决方案
.foo {
background-image: image-set(url(img/test.png) 1x,
url(img/test-2x.png) 2x,
url(my-img-print.png) 600dpi);
}
一个颜色函数来修改颜色
a {
color: color(red alpha(-10%));
}
a:hover {
color: color(red blackness(80%));
}
与 hs1() 相似，不过更容易阅读
body {
color: hwb(90, 0%, 0%, 0.5);
}
允许你使用超过50种渐变的灰度值，对于第一个参数，你可以使用 0 - 255 的数值或者百分比。
.foo {
color: gray(85);
}
.bar {
color: gray(10%, 50%);
}
允许使用4位或者8位十六进制数来表示颜色
body {
background: #9d9c;
}
如果你使用的是旧的浏览器（比如 IE8），那么把 rgba() 转换为实体颜色
body {
background: rgba(153, 221, 153, 0.8);
/* you will have the same value without alpha as a fallback */
}
允许你使用新的颜色关键词
body {
background: rgba(153, 221, 153, 0.8);
/* you will have the same value without alpha as a fallback */
}
通过 font-feature-settings降级的一种属性。你可以通过这个链接来查看浏览器支持
h2 {
font-variant-caps: small-caps;
}
table {
font-variant-numeric: lining-nums;
}
W3C 的 filters 只允许使用url(data:*)来转换 svg filter。
.blur {
filter: blur(4px);
}
允许你使用如何值的初始值。该值表示属性初始化值所指定的值，但这并不意味着浏览器的默认值。
比如，对于display属性，initial 时钟标示内联，因为这是属性指定的初始值。一个例子，div { display: initial }并不代表block，而是inline。
div {
display: initial; /* inline */
}
在旧浏览器里将 rem 降级为 px（比如IE8）
h1 {
font-size: 1.5rem;
}
允许你使用:any-link伪类
nav :any-link {
background-color: yellow;
}
允许你使用:matches伪类
p:matches(:first-child, .special) {
color: red;
}
允许你使用支持最多选择器的:not伪类，将此降级为只选择一个选择器的:not
p:not(:first-child, .special) {
color: red;
}
如果你的浏览器是旧浏览器，会将 :: 降级为:。
a::before {
/* ... */
}
将overflow-wrap转换为word-wrap属性
body {
overflow-wrap: break-word;
}
允许你使用不区分大小写的属性
[frame=hsides i] {
border-style: solid none;
}
允许你使用由空格分割的参数与可选的由斜线分割的不透明度新语法。
你也可以使用数字来表示颜色通道。
alpha 值接受百分比和数字，并且将 rgb() 作为可选参数。因此 rgb() 和 rgba() 现在是彼此的别名。
div {
background-color: rgb(100 222.2 100.9 / 30%);
}
允许你使用由空格分割的参数与可选的由斜线分割的不透明度新语法。
hsl() 现在接受角度（deg, grad, rad, turn）以及用数字表示色调，用百分比或者数字来表示 alpha 值。所以 hsl() 与 hsla() 现在也是彼此的别名。
div {
color: hsl(90deg 90% 70%);
background-color: hsl(300grad 25% 15% / 70%);
}
允许你使用 system-ui 通用字体系列。当前转换提供了一个实际的字体列表来作为降级方案。
body {
font-family: system-ui;
}
cssnext 是一个 PostCSS 的包，我们可以在样式表中利用 cssnext 额外增加一些 CSS 规范。
/* custom properties */
:root {
--heading-color: #ff0000;
}
/* custom selectors */
@custom-selector :--headings h1, h2, h3, h4, h5, h6;
/* usage */
:--headings {
color: var(--heading-color);
}
通过 cssnext，上述代码会被处理成以下内容
h1,
h2,
h3,
h4,
h5,
h6 {
color: #ff0000;
}
这真的很简洁，其中还有很多令人兴奋的特性。因为我们书写的是未来规范的 CSS，所以 PostCSS 的生成步骤不需要浏览器去执行。
使用 cssnext，我们可以通过 javascript 创建自定义函数来操作被解析的 CSS。在 Sass 中，我们经常使用生成行距的函数（根据基本的 line-height 计算），它有助于创建简单且可维护的垂直韵律。
$line-height: 32px;
/* vertical rhythm function */
@function vr($amount) {
@return $line-height * $amount;
}
/* input */
.selector { margin-bottom: vr(2) }
/* output */
.selector { margin-bottom: 64px; }
如果用 PostCSS 做的话，我们可以自定义 CSS 组件而不是函数。
/* input */
.selector { margin-bottom: 2vr }
/* output */
.selector { margin-bottom: 64px; }
PostCSS 声称比预处理器快 3-30 倍。这里使用 10000 个选择器的 5 个属性上使用上述 Sass 函数和 PostCSS 函数，也就是处理 50000 次，以下是对比结果。
Libsass 3.2
PostCSS
从结果中很显然看出，PostCSS 比 LibSass 的速度快了很多。
Postman 可以轻松创建和发送 API 请求。向端点发送请求、从数据源检索数据或测试 API 的功能。您无需在终端中输入命令或编写任何代码。创建一个新请求并选择Send，API 响应出现在 Postman 中。
定义的 API 请求
API 为一个应用程序访问另一个应用程序的功能提供了一种结构化的方式。通常，这种通信通过 API 服务器在 Internet 上发生。客户端应用程序（如移动应用程序）向服务器发送请求，请求处理后服务器向客户端返回响应。
请求包括 API 端点的 URL 和 HTTP 请求方法。该方法指示您希望 API 执行的操作。以下是一些最常用的方法：
- GET从 API 检索数据。
- POST将新数据发送到 API。
- PATCH并PUT更新现有数据。
- DELETE删除现有数据。
以登录功能为例请求设置如下图：
接口名称编辑
接口访问方式设置：GET、Post、Put、Delete等
URL编辑
发送按钮
params设置
Authorization 认证方式：
Headers设置
常规默认头设置
Body（参数设置）
- none
- form-data
网站表单通常以multipart/form-data. form-data 您可以使用“正文”选项卡在 Postman 中复制此内容。表单数据允许您发送键值对，并指定内容类型。
您可以使用表单数据附加文件。当您反复进行发送相同文件的 API 调用时，Postman 将保留您的文件路径以供后续使用。这也有助于您运行包含需要上传文件的请求的集合。不支持上传多个文件，每个文件都有自己的内容类型。
- x-www-from-urlencoded
URL 编码的数据使用与 URL 参数相同的编码。如果您的 API 需要 url 编码的数据，请在请求x-www-form-urlencoded的“正文”选项卡中选择。输入要与请求一起发送的键值对，Postman 将在发送前对其进行编码。
表单数据和 url 编码之间有时会混淆。如果您不确定需要哪一个，请咨询您的 API 提供商。
- raw
您可以使用原始身体数据来发送您可以作为文本输入的任何内容。使用raw选项卡和类型下拉列表来指示数据的格式（Text、JavaScript、JSON、HTML或XML），Postman 将启用语法突出显示以及将相关标头附加到您的请求中。
- binary
您可以使用二进制数据来发送无法通过请求正文在 Postman 编辑器中手动输入的信息，例如图像、音频和视频文件（您也可以发送文本文件）。
- graphql：您可以通过选择请求正文中的GraphQL选项卡来发送带有 Postman 请求的 GraphQL 查询。在查询区域中输入您的代码，并在GraphQL 变量部分中输入任何变量
这些body体格式设置按后台接口定义进行设置即可。具体表达每个公司的表述都有所不同，笔者就不瞎写自己的文案了。
Pre-request Script（预执行脚本设置）
```javascript
pm.globals.get("variable_key");
pm.variables.get("variable_key");
pm.environment.get("variable_key");
pm.collectionVariables.get("variable_key");
pm.environment.set("variable_key", "variable_value");
pm.globals.set("variable_key", "variable_value");
pm.collectionVariables.set("variable_key", "variable_value");
pm.environment.unset("variable_key");
pm.globals.unset("variable_key");
pm.collectionVariables.unset("variable_key");
pm.sendRequest("https://postman-echo.com/get", function (err, response) {
console.log(response.json());
});
```不多说这个了。需要进行JavaScript编程。后面讲解脚本会涉及。这里不展开了
Tests
```javascript
pm.test("Status code is 200", function () {
pm.response.to.have.status(200);
});
pm.test("Body matches string", function () {
pm.expect(pm.response.text()).to.include("string_you_want_to_search");
});
```这个需要**单元测试**理念和**JavaScript开发语言**。也略过。后面文章展开
Settings
一些请求设置
发送请求
准备好发送您的第一个请求了吗？打开 Postman 并开始：
在主工作区中选择+打开一个新选项卡。
输入https://console-api.apipost.cn/api/demo/login请求 URL。
选择发送。
您将在下部窗格中看到从服务器发送的响应数据。
```javascript
{
"code": 10000,
"msg": "success",
"data": {
"token": "31c011ce830d442af42ab3df31774a80"
}
}
```在此示例中，Postman 充当客户端应用程序并与 API 服务器通信。以下是您选择Send时发生的情况：
Postman 向位于 的Postman Echo API服务器发送了一个GET请求。console-api.apipost.cn API 服务器接收到请求，对其进行处理，然后将响应返回给 Postman。
Postman 收到响应并将其显示在“响应”窗格中。
Body
Postman Body选项卡为您提供了多种工具，可帮助您快速了解响应。您可以在以下四种视图之一中查看正文：Pretty、Raw、Preview和Visualize。
在响应中查找项目- 要打开搜索栏，请选择 搜索
结果窗格中的搜索图标。您还可以将光标放在响应中并选择⌘+F或Ctrl+F。此选项在响应的预览或可视化视图中不可用。
请注意，如果响应的Content-Type标头表明响应是图像，则 Postman 将自动检测并渲染图像
Pretty
Pretty 视图格式化 JSON 或 XML 响应，以便更容易查看。Pretty 视图中的链接被突出显示，选择它们可以在 Postman 中加载带有链接 URL 的 GET 请求。
要导航大型响应，请选择行左侧的向下箭头以折叠响应的大部分。
强制 JSON 格式。为了使 Postman 自动格式化正文，响应必须具有适当的Content-Type标头。如果您收到带有不同Content-Type标头的响应，您可以通过 JSON 强制格式化。在 Postman 标题中，选择设置图标 设置图标 ，然后选择设置。在常规选项卡中，从语言检测下拉列表中选择JSON 。
Raw
原始视图是一个带有响应正文的大文本区域。它可以指示您的响应是否被缩小
Preview
预览视图在沙盒 iframe 中呈现响应。默认情况下，某些 Web 框架会返回 HTML 错误，而 Preview 在这些情况下对调试特别有帮助。
由于 iframe 沙盒限制，JavaScript 和图像在 iframe 中被关闭。对于二进制响应类型，您可以选择“发送和下载”以将响应保存在本地。然后，您可以使用适当的查看器查看它。这使您可以灵活地测试音频文件、PDF、zip 文件或 API 返回的任何其他文件类型。
Visualize
Visualize 视图根据您添加到请求Tests的可视化代码呈现 API 响应中的数据。有关如何添加、使用和调试可视化代码的详细信息
Cookies
您可以在Cookies选项卡中查看服务器发送的 cookie。cookie 的条目包括其名称、值、关联的域和路径以及有关 cookie 的其他信息。
Headers
标题在标题选项卡下显示为键值对。将鼠标悬停在 信息图标 标头名称旁边的信息图标上可查看根据 HTTP 规范的标头描述。
如果您发送 HEAD 请求，Postman 将默认显示Headers选项卡而不是Body选项卡。
Test Results
如果您正在查看的 API 请求有任何测试脚本，则结果将显示在“测试结果”选项卡中
network
当您的 API 返回响应时，Postman 会显示网络信息。将鼠标悬停在网络图标 网络信息图标 上可查看您发送的请求的本地和远程 IP 地址。
当您提出https请求时，网络图标包括一个挂锁。当您将鼠标悬停在该图标上时，网络信息将显示其他信息，包括证书验证详细信息。
响应代码
Postman 显示 API 返回的响应代码。将鼠标悬停在响应代码上以查看代码的简短描述及其含义。
响应时间
Postman 自动计算响应从服务器到达所需的时间（以毫秒为单位）。此信息可用于一些初步的性能测试。将鼠标悬停在响应时间上可查看图表，其中包含有关流程中每个事件所用时间的信息。
响应大小
Postman 显示响应的大致大小。将鼠标悬停在响应大小上以查看按正文和标题大小划分的细分。
保存回复
如果请求已保存在集合中，您可以保存该请求的响应。返回响应后，选择Save Response。
选择另存为示例以将响应保存为您以后可以访问的示例。
选择保存到文件以将响应保存为 JSON 文件。
简单点讲，PostCSS是CSS的处理器。如果你以前使用过CSS的预处理器的话，比如Sass、LESS或者说Stylus。这几个是使用预编码来处理CSS，然后编译成线上需要使用的CSS。而PostCSS刚好相反，他是处理你写好的CSS，让你的CSS更健康。可以用一张图来简单的描述：
1
上图也告诉我们，在这个过程中有很多插件。这些插件就是PostCSS的插件，而且这些插件都是使用JavaScript写的。言外之意，你可以使用JavaScript基于PostCSS核心的Core上编写任何你想要的一款功能的插件。也因为这个原因，PostCSS的插件生态圈非常的强大，最常见的就是Autoprefixer、cssnext之类的。当然还有其他的，这也是PostCSS能在社区迅速发展状大的原因之一。我自己很多时候常把PostCSS的插件生态看作是NPM的生态。这个时候你想想就知道了。
有了PostCSS，我们并不需要抛弃以前所熟悉的Sass或LESS之类的，你的开发模式可以这样：
2
使用Sass先编译成CSS，然后通过PostCSS对编译好的 CSS做优化处理。让自己的代码更为健康。当然你也可以直接自己基于PostCSS定制一款适合你自己的预处理器。
尽管表面上它看起来是一个预处理器，其实它不是一个预处理器
尽管表面上它看起来是一个后处理器，其实它也不是一个后处理器
尽管它可以促进、支持未来的语法，其实它不是未来语法
尽管它可以提供清理、优化代码这样的功能，其实它不是清理、优化代码的工具
它不是任何一件事情，这也意味者它潜力无限，你可以根据自己的需要配置你需要的功能
多样化的功能插件，创建了一个生态的插件系统
根据你需要的特性进行模块化
快速编译
创建自己的插件，且具可访问性
可以像普通的CSS一样使用它
不依赖于任何预处理器就具备创建一个库的能力
可以与许多流行工具构建无缝部署
像PostCSS本身一样令人惊奇的是，它有很多不同的插件，这也是让PostCSS发光之处。当你看到PostCSS在GitHub上的可用插件列表，你会发现其具有各式各样的功能。
另一方面，PostCSS具有很可用的插件，你可以根据自己所需尽可能使用多的选择或尽可能少选择。
如果仅想用PostCSS让CSS是更有效率和让浏览器更友好的话，加载一些优化插件，你就可以闪人了。
如果仅想用PostCSS作为预处理器的话，使用一些语言扩展插件就OK。
PostCSS的基本原理是粒子化，模块化。简而言之，没有处理多个功能的笨重插件。相反，每创建一个插件，就是一个功能。
PostCSS是用JavaScript编写的插件，这样只要能编写JavaScript的就可以创建一个自己想要的插件，达到自己的目的。值得庆幸的是，就算你不是专业的JavaScript开发人员，但使用PostCSS开发插件也就只需要短短的几个小时，就可以开发出一个全功能的插件。
大多数PostCSS插件不需要使用自定义的语法，其实它就是典型的预处理器。相反，它们可以应用常规的CSS语法。这也意味着，你可以使用PostCSS就像是使用CSS一样。比如说，你要完成一个前端框架，你完全可以使用别人项目中的文件，例如Normalize.css文件。
虽然过去他们可能一直使用Stylus、Sass或LESS来编写一个库，但我们也开始看到有人通过PostCSS来创建整个库。
另外有一本书专门介绍PostCSS：
即将上架
这是一本英文书，听说中文版本很快要上架了。如果喜欢的话，可以关注一下。
最后提到一点，各部分参考资料以及案例的小伙伴们可来我的前端群：621071874，这里有小编收集到的各部分资料以及案例，望能帮到各位。
*请认真填写需求信息，我们会在24小时内与您取得联系。
