整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
ostCSS 是使用 javascript 插件轉(zhuǎn)換 CSS 的后處理器。PostCSS 本身不會對你的 CSS 做任何事情，你需要安裝一些 plugins 才能開始工作。這不僅使其模塊化，同時功能加強。
cssnext 是一個 CSS transpiler，允許你使用最新的 CSS 語法。cssnext 把新 CSS 規(guī)范轉(zhuǎn)換成兼容性更強的 CSS，所以不需要等待各種瀏覽器的支持。
PostCSS 的工作原理就是解析 CSS 并將其轉(zhuǎn)換成一個 CSS 的節(jié)點數(shù)，這可以通過 javascript 來控制，然后返回修改后的樹并保存。它與 Sass（預(yù)處理器）的工作原理不同，你基本上是用一種不同的語言來編譯 CSS。
為了簡單的方式解釋預(yù)處理和后處理的不同，這里以單位轉(zhuǎn)換為例。當(dāng)書寫 Sass 時，我們可以用函數(shù)px轉(zhuǎn)換成rem：
/* input */
.selector { margin-bottom: rem(20px); }
/* output, assuming base font size is 1rem */
.selector { margin-bottom: 1.25rem; }
這種方式節(jié)省了我們手工計算的時間。不過通過 PostCSS，我們能夠做的更好。因為是后處理的緣故，我們不需要任何函數(shù)來編譯 CSS。我們可以直接書寫px，它可以自動地轉(zhuǎn)換成rem。
/* input */
.selector { margin-bottom: 20px; }
/* output, assuming base font size is 1rem */
.selector { margin-bottom: 1.25rem; }
PostCSS 會在每一個px值出現(xiàn)并運行計算之前處理聲明，將其轉(zhuǎn)換成rem的值。
cssnext 包含了大量的新特性：
自動添加（以及刪除過時/沒用的前綴），由 autoprefixer 實現(xiàn)
自定義屬性的當(dāng)前轉(zhuǎn)換旨在提供一種限定在:root選擇器中、面向未來的、由原生 CSS 自定義屬性提供的新特性。
使用特性：
:root {
--mainColor: red;
}
a {
color: var(--mainColor);
}
允許你在已命名的自定義屬性中存儲一套變量，然后在其他類型規(guī)則中引用它。
:root {
--danger-theme: {
color: white;
background-color: red;
};
}
.danger {
@apply --danger-theme;
}
使用優(yōu)化預(yù)分析 var() 引用來允許你更安全的用 calc() 使用自定義變量
:root {
--fontSize: 1rem;
}
h1 {
font-size: calc(var(--fontSize) * 2);
}
一個更好的方法來實現(xiàn)語義化的媒體查詢
@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 */
}
允許你創(chuàng)造自己的選擇器
@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;
}
}
允許你根據(jù)不同的用戶設(shè)備來提供不同的圖片解決方案
.foo {
background-image: image-set(url(img/test.png) 1x,
url(img/test-2x.png) 2x,
url(my-img-print.png) 600dpi);
}
一個顏色函數(shù)來修改顏色
a {
color: color(red alpha(-10%));
}
a:hover {
color: color(red blackness(80%));
}
與 hs1() 相似，不過更容易閱讀
body {
color: hwb(90, 0%, 0%, 0.5);
}
允許你使用超過50種漸變的灰度值，對于第一個參數(shù)，你可以使用 0 - 255 的數(shù)值或者百分比。
.foo {
color: gray(85);
}
.bar {
color: gray(10%, 50%);
}
允許使用4位或者8位十六進制數(shù)來表示顏色
body {
background: #9d9c;
}
如果你使用的是舊的瀏覽器（比如 IE8），那么把 rgba() 轉(zhuǎn)換為實體顏色
body {
background: rgba(153, 221, 153, 0.8);
/* you will have the same value without alpha as a fallback */
}
允許你使用新的顏色關(guān)鍵詞
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:*)來轉(zhuǎn)換 svg filter。
.blur {
filter: blur(4px);
}
允許你使用如何值的初始值。該值表示屬性初始化值所指定的值，但這并不意味著瀏覽器的默認值。
比如，對于display屬性，initial 時鐘標(biāo)示內(nèi)聯(lián)，因為這是屬性指定的初始值。一個例子，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轉(zhuǎn)換為word-wrap屬性
body {
overflow-wrap: break-word;
}
允許你使用不區(qū)分大小寫的屬性
[frame=hsides i] {
border-style: solid none;
}
允許你使用由空格分割的參數(shù)與可選的由斜線分割的不透明度新語法。
你也可以使用數(shù)字來表示顏色通道。
alpha 值接受百分比和數(shù)字，并且將 rgb() 作為可選參數(shù)。因此 rgb() 和 rgba() 現(xiàn)在是彼此的別名。
div {
background-color: rgb(100 222.2 100.9 / 30%);
}
允許你使用由空格分割的參數(shù)與可選的由斜線分割的不透明度新語法。
hsl() 現(xiàn)在接受角度（deg, grad, rad, turn）以及用數(shù)字表示色調(diào)，用百分比或者數(shù)字來表示 alpha 值。所以 hsl() 與 hsla() 現(xiàn)在也是彼此的別名。
div {
color: hsl(90deg 90% 70%);
background-color: hsl(300grad 25% 15% / 70%);
}
允許你使用 system-ui 通用字體系列。當(dāng)前轉(zhuǎn)換提供了一個實際的字體列表來作為降級方案。
body {
font-family: system-ui;
}
cssnext 是一個 PostCSS 的包，我們可以在樣式表中利用 cssnext 額外增加一些 CSS 規(guī)范。
/* custom properties */
:root {
--heading-color: #ff0000;
}
/* custom selectors */
@custom-selector :--headings h1, h2, h3, h4, h5, h6;
/* usage */
:--headings {
color: var(--heading-color);
}
通過 cssnext，上述代碼會被處理成以下內(nèi)容
h1,
h2,
h3,
h4,
h5,
h6 {
color: #ff0000;
}
這真的很簡潔，其中還有很多令人興奮的特性。因為我們書寫的是未來規(guī)范的 CSS，所以 PostCSS 的生成步驟不需要瀏覽器去執(zhí)行。
使用 cssnext，我們可以通過 javascript 創(chuàng)建自定義函數(shù)來操作被解析的 CSS。在 Sass 中，我們經(jīng)常使用生成行距的函數(shù)（根據(jù)基本的 line-height 計算），它有助于創(chuàng)建簡單且可維護的垂直韻律。
$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 組件而不是函數(shù)。
/* input */
.selector { margin-bottom: 2vr }
/* output */
.selector { margin-bottom: 64px; }
PostCSS 聲稱比預(yù)處理器快 3-30 倍。這里使用 10000 個選擇器的 5 個屬性上使用上述 Sass 函數(shù)和 PostCSS 函數(shù)，也就是處理 50000 次，以下是對比結(jié)果。
Libsass 3.2
PostCSS
從結(jié)果中很顯然看出，PostCSS 比 LibSass 的速度快了很多。
Postman 可以輕松創(chuàng)建和發(fā)送 API 請求。向端點發(fā)送請求、從數(shù)據(jù)源檢索數(shù)據(jù)或測試 API 的功能。您無需在終端中輸入命令或編寫任何代碼。創(chuàng)建一個新請求并選擇Send，API 響應(yīng)出現(xiàn)在 Postman 中。
定義的 API 請求
API 為一個應(yīng)用程序訪問另一個應(yīng)用程序的功能提供了一種結(jié)構(gòu)化的方式。通常，這種通信通過 API 服務(wù)器在 Internet 上發(fā)生。客戶端應(yīng)用程序（如移動應(yīng)用程序）向服務(wù)器發(fā)送請求，請求處理后服務(wù)器向客戶端返回響應(yīng)。
請求包括 API 端點的 URL 和 HTTP 請求方法。該方法指示您希望 API 執(zhí)行的操作。以下是一些最常用的方法：
- GET從 API 檢索數(shù)據(jù)。
- POST將新數(shù)據(jù)發(fā)送到 API。
- PATCH并PUT更新現(xiàn)有數(shù)據(jù)。
- DELETE刪除現(xiàn)有數(shù)據(jù)。
以登錄功能為例請求設(shè)置如下圖：
接口名稱編輯
接口訪問方式設(shè)置：GET、Post、Put、Delete等
URL編輯
發(fā)送按鈕
params設(shè)置
Authorization 認證方式：
Headers設(shè)置
常規(guī)默認頭設(shè)置
Body（參數(shù)設(shè)置）
- none
- form-data
網(wǎng)站表單通常以multipart/form-data. form-data 您可以使用“正文”選項卡在 Postman 中復(fù)制此內(nèi)容。表單數(shù)據(jù)允許您發(fā)送鍵值對，并指定內(nèi)容類型。
您可以使用表單數(shù)據(jù)附加文件。當(dāng)您反復(fù)進行發(fā)送相同文件的 API 調(diào)用時，Postman 將保留您的文件路徑以供后續(xù)使用。這也有助于您運行包含需要上傳文件的請求的集合。不支持上傳多個文件，每個文件都有自己的內(nèi)容類型。
- x-www-from-urlencoded
URL 編碼的數(shù)據(jù)使用與 URL 參數(shù)相同的編碼。如果您的 API 需要 url 編碼的數(shù)據(jù)，請在請求x-www-form-urlencoded的“正文”選項卡中選擇。輸入要與請求一起發(fā)送的鍵值對，Postman 將在發(fā)送前對其進行編碼。
表單數(shù)據(jù)和 url 編碼之間有時會混淆。如果您不確定需要哪一個，請咨詢您的 API 提供商。
- raw
您可以使用原始身體數(shù)據(jù)來發(fā)送您可以作為文本輸入的任何內(nèi)容。使用raw選項卡和類型下拉列表來指示數(shù)據(jù)的格式（Text、JavaScript、JSON、HTML或XML），Postman 將啟用語法突出顯示以及將相關(guān)標(biāo)頭附加到您的請求中。
- binary
您可以使用二進制數(shù)據(jù)來發(fā)送無法通過請求正文在 Postman 編輯器中手動輸入的信息，例如圖像、音頻和視頻文件（您也可以發(fā)送文本文件）。
- graphql：您可以通過選擇請求正文中的GraphQL選項卡來發(fā)送帶有 Postman 請求的 GraphQL 查詢。在查詢區(qū)域中輸入您的代碼，并在GraphQL 變量部分中輸入任何變量
這些body體格式設(shè)置按后臺接口定義進行設(shè)置即可。具體表達每個公司的表述都有所不同，筆者就不瞎寫自己的文案了。
Pre-request Script（預(yù)執(zhí)行腳本設(shè)置）
```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開發(fā)語言**。也略過。后面文章展開
Settings
一些請求設(shè)置
發(fā)送請求
準(zhǔn)備好發(fā)送您的第一個請求了嗎？打開 Postman 并開始：
在主工作區(qū)中選擇+打開一個新選項卡。
輸入https://console-api.apipost.cn/api/demo/login請求 URL。
選擇發(fā)送。
您將在下部窗格中看到從服務(wù)器發(fā)送的響應(yīng)數(shù)據(jù)。
```javascript
{
"code": 10000,
"msg": "success",
"data": {
"token": "31c011ce830d442af42ab3df31774a80"
}
}
```在此示例中，Postman 充當(dāng)客戶端應(yīng)用程序并與 API 服務(wù)器通信。以下是您選擇Send時發(fā)生的情況：
Postman 向位于 的Postman Echo API服務(wù)器發(fā)送了一個GET請求。console-api.apipost.cn API 服務(wù)器接收到請求，對其進行處理，然后將響應(yīng)返回給 Postman。
Postman 收到響應(yīng)并將其顯示在“響應(yīng)”窗格中。
Body
Postman Body選項卡為您提供了多種工具，可幫助您快速了解響應(yīng)。您可以在以下四種視圖之一中查看正文：Pretty、Raw、Preview和Visualize。
在響應(yīng)中查找項目- 要打開搜索欄，請選擇 搜索
結(jié)果窗格中的搜索圖標(biāo)。您還可以將光標(biāo)放在響應(yīng)中并選擇?+F或Ctrl+F。此選項在響應(yīng)的預(yù)覽或可視化視圖中不可用。
請注意，如果響應(yīng)的Content-Type標(biāo)頭表明響應(yīng)是圖像，則 Postman 將自動檢測并渲染圖像
Pretty
Pretty 視圖格式化 JSON 或 XML 響應(yīng)，以便更容易查看。Pretty 視圖中的鏈接被突出顯示，選擇它們可以在 Postman 中加載帶有鏈接 URL 的 GET 請求。
要導(dǎo)航大型響應(yīng)，請選擇行左側(cè)的向下箭頭以折疊響應(yīng)的大部分。
強制 JSON 格式。為了使 Postman 自動格式化正文，響應(yīng)必須具有適當(dāng)?shù)腃ontent-Type標(biāo)頭。如果您收到帶有不同Content-Type標(biāo)頭的響應(yīng)，您可以通過 JSON 強制格式化。在 Postman 標(biāo)題中，選擇設(shè)置圖標(biāo) 設(shè)置圖標(biāo) ，然后選擇設(shè)置。在常規(guī)選項卡中，從語言檢測下拉列表中選擇JSON 。
Raw
原始視圖是一個帶有響應(yīng)正文的大文本區(qū)域。它可以指示您的響應(yīng)是否被縮小
Preview
預(yù)覽視圖在沙盒 iframe 中呈現(xiàn)響應(yīng)。默認情況下，某些 Web 框架會返回 HTML 錯誤，而 Preview 在這些情況下對調(diào)試特別有幫助。
由于 iframe 沙盒限制，JavaScript 和圖像在 iframe 中被關(guān)閉。對于二進制響應(yīng)類型，您可以選擇“發(fā)送和下載”以將響應(yīng)保存在本地。然后，您可以使用適當(dāng)?shù)牟榭雌鞑榭此＿@使您可以靈活地測試音頻文件、PDF、zip 文件或 API 返回的任何其他文件類型。
Visualize
Visualize 視圖根據(jù)您添加到請求Tests的可視化代碼呈現(xiàn) API 響應(yīng)中的數(shù)據(jù)。有關(guān)如何添加、使用和調(diào)試可視化代碼的詳細信息
Cookies
您可以在Cookies選項卡中查看服務(wù)器發(fā)送的 cookie。cookie 的條目包括其名稱、值、關(guān)聯(lián)的域和路徑以及有關(guān) cookie 的其他信息。
Headers
標(biāo)題在標(biāo)題選項卡下顯示為鍵值對。將鼠標(biāo)懸停在 信息圖標(biāo) 標(biāo)頭名稱旁邊的信息圖標(biāo)上可查看根據(jù) HTTP 規(guī)范的標(biāo)頭描述。
如果您發(fā)送 HEAD 請求，Postman 將默認顯示Headers選項卡而不是Body選項卡。
Test Results
如果您正在查看的 API 請求有任何測試腳本，則結(jié)果將顯示在“測試結(jié)果”選項卡中
network
當(dāng)您的 API 返回響應(yīng)時，Postman 會顯示網(wǎng)絡(luò)信息。將鼠標(biāo)懸停在網(wǎng)絡(luò)圖標(biāo) 網(wǎng)絡(luò)信息圖標(biāo) 上可查看您發(fā)送的請求的本地和遠程 IP 地址。
當(dāng)您提出https請求時，網(wǎng)絡(luò)圖標(biāo)包括一個掛鎖。當(dāng)您將鼠標(biāo)懸停在該圖標(biāo)上時，網(wǎng)絡(luò)信息將顯示其他信息，包括證書驗證詳細信息。
響應(yīng)代碼
Postman 顯示 API 返回的響應(yīng)代碼。將鼠標(biāo)懸停在響應(yīng)代碼上以查看代碼的簡短描述及其含義。
響應(yīng)時間
Postman 自動計算響應(yīng)從服務(wù)器到達所需的時間（以毫秒為單位）。此信息可用于一些初步的性能測試。將鼠標(biāo)懸停在響應(yīng)時間上可查看圖表，其中包含有關(guān)流程中每個事件所用時間的信息。
響應(yīng)大小
Postman 顯示響應(yīng)的大致大小。將鼠標(biāo)懸停在響應(yīng)大小上以查看按正文和標(biāo)題大小劃分的細分。
保存回復(fù)
如果請求已保存在集合中，您可以保存該請求的響應(yīng)。返回響應(yīng)后，選擇Save Response。
選擇另存為示例以將響應(yīng)保存為您以后可以訪問的示例。
選擇保存到文件以將響應(yīng)保存為 JSON 文件。
簡單點講，PostCSS是CSS的處理器。如果你以前使用過CSS的預(yù)處理器的話，比如Sass、LESS或者說Stylus。這幾個是使用預(yù)編碼來處理CSS，然后編譯成線上需要使用的CSS。而PostCSS剛好相反，他是處理你寫好的CSS，讓你的CSS更健康。可以用一張圖來簡單的描述：
1
上圖也告訴我們，在這個過程中有很多插件。這些插件就是PostCSS的插件，而且這些插件都是使用JavaScript寫的。言外之意，你可以使用JavaScript基于PostCSS核心的Core上編寫任何你想要的一款功能的插件。也因為這個原因，PostCSS的插件生態(tài)圈非常的強大，最常見的就是Autoprefixer、cssnext之類的。當(dāng)然還有其他的，這也是PostCSS能在社區(qū)迅速發(fā)展?fàn)畲蟮脑蛑弧Ｎ易约汉芏鄷r候常把PostCSS的插件生態(tài)看作是NPM的生態(tài)。這個時候你想想就知道了。
有了PostCSS，我們并不需要拋棄以前所熟悉的Sass或LESS之類的，你的開發(fā)模式可以這樣：
2
使用Sass先編譯成CSS，然后通過PostCSS對編譯好的 CSS做優(yōu)化處理。讓自己的代碼更為健康。當(dāng)然你也可以直接自己基于PostCSS定制一款適合你自己的預(yù)處理器。
盡管表面上它看起來是一個預(yù)處理器，其實它不是一個預(yù)處理器
盡管表面上它看起來是一個后處理器，其實它也不是一個后處理器
盡管它可以促進、支持未來的語法，其實它不是未來語法
盡管它可以提供清理、優(yōu)化代碼這樣的功能，其實它不是清理、優(yōu)化代碼的工具
它不是任何一件事情，這也意味者它潛力無限，你可以根據(jù)自己的需要配置你需要的功能
多樣化的功能插件，創(chuàng)建了一個生態(tài)的插件系統(tǒng)
根據(jù)你需要的特性進行模塊化
快速編譯
創(chuàng)建自己的插件，且具可訪問性
可以像普通的CSS一樣使用它
不依賴于任何預(yù)處理器就具備創(chuàng)建一個庫的能力
可以與許多流行工具構(gòu)建無縫部署
像PostCSS本身一樣令人驚奇的是，它有很多不同的插件，這也是讓PostCSS發(fā)光之處。當(dāng)你看到PostCSS在GitHub上的可用插件列表，你會發(fā)現(xiàn)其具有各式各樣的功能。
另一方面，PostCSS具有很可用的插件，你可以根據(jù)自己所需盡可能使用多的選擇或盡可能少選擇。
如果僅想用PostCSS讓CSS是更有效率和讓瀏覽器更友好的話，加載一些優(yōu)化插件，你就可以閃人了。
如果僅想用PostCSS作為預(yù)處理器的話，使用一些語言擴展插件就OK。
PostCSS的基本原理是粒子化，模塊化。簡而言之，沒有處理多個功能的笨重插件。相反，每創(chuàng)建一個插件，就是一個功能。
PostCSS是用JavaScript編寫的插件，這樣只要能編寫JavaScript的就可以創(chuàng)建一個自己想要的插件，達到自己的目的。值得慶幸的是，就算你不是專業(yè)的JavaScript開發(fā)人員，但使用PostCSS開發(fā)插件也就只需要短短的幾個小時，就可以開發(fā)出一個全功能的插件。
大多數(shù)PostCSS插件不需要使用自定義的語法，其實它就是典型的預(yù)處理器。相反，它們可以應(yīng)用常規(guī)的CSS語法。這也意味著，你可以使用PostCSS就像是使用CSS一樣。比如說，你要完成一個前端框架，你完全可以使用別人項目中的文件，例如Normalize.css文件。
雖然過去他們可能一直使用Stylus、Sass或LESS來編寫一個庫，但我們也開始看到有人通過PostCSS來創(chuàng)建整個庫。
另外有一本書專門介紹PostCSS：
即將上架
這是一本英文書，聽說中文版本很快要上架了。如果喜歡的話，可以關(guān)注一下。
最后提到一點，各部分參考資料以及案例的小伙伴們可來我的前端群：621071874，這里有小編收集到的各部分資料以及案例，望能幫到各位。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
