【翻譯】PostCSS簡介

Lsnsh 發(fā)布于2019-08-30 12:59 / 2212人閱讀

摘要：許多開發(fā)人員花時間在使用的預(yù)處理器上如和。傳統(tǒng)的預(yù)處理器的問題不能擴(kuò)展。有些預(yù)處理器提供諸如的功能，可以徹底不使用它們。每個預(yù)處理器已經(jīng)有了自己的標(biāo)準(zhǔn)。如下它被翻譯成嗯我從來沒有說過所有的插件都是有用的結(jié)束語和預(yù)處理器是偉大的。

許多開發(fā)人員花時間在使用CSS的預(yù)處理器上如less,sass和stylus。這些工具已經(jīng)成為Web開發(fā)的重要組成部分。寫一個網(wǎng)站的樣式，不使用嵌套，變量或混入等功能很少見。它們每個都是非常實用的，讓我們退后一步看，考慮以這種方式使用預(yù)處理器是不是最好的辦法。
傳統(tǒng)的預(yù)處理器的問題：
不能擴(kuò)展。無論您選擇哪種預(yù)處理，都被限制到設(shè)定的，它提供的功能。如果您需要在其上構(gòu)建功能，在構(gòu)建過程中,你需要添加一個多帶帶的步驟。如果你想寫一個擴(kuò)展，只能針對你自己的。
不能剔除任何功能。有些預(yù)處理器提供諸如sass的@extend 功能，可以徹底不使用它們。當(dāng)你不使用它們，卻無法刪除該工具的這個功能，減少代碼的體積。
自己的CSS標(biāo)準(zhǔn)。每個預(yù)處理器已經(jīng)有了自己的標(biāo)準(zhǔn)。但并不是W3C標(biāo)準(zhǔn)，這意味著它們不會被新的W3C標(biāo)準(zhǔn)兼容。

下面要介紹的PostCSS，就是解決以上問題的工具。
什么是PostCSS？
PostCSS不是預(yù)處理器; 它不改變CSS。它本身并不完成css工作。它的作用是提供一個CSS解析器和創(chuàng)建可以分析，測試，處理資源，優(yōu)化，創(chuàng)建回調(diào)，和傳輸給其它解析CSS框架的插件的框架。PostCSS把CSS解析成抽象語法樹（AST），通過一系列的插件，然后重新編譯成一個字符串。如果你熟悉JavaScript工具，那么可以把PostCSS類比為CSS的Babel。目前有超過200個PostCSS插件，其中有許多在的PostCSS GitHub的頁上列出，而另一些可以在PostCSS 的postcss.parts目錄中找到。PostCSS可以集成在大多數(shù)構(gòu)建工具，包括gulp，grunt，WebPack或NPM。那么，如何用PostCSS解決我們前面列出的問題？

每個插件多帶帶安裝。選擇需要插件以及順序應(yīng)用。通常情況下，插件可以使用另外一些設(shè)置選項進(jìn)行配置。

您可以編寫自己的插件。每個插件PostCSS接收解析CSS作為輸入?yún)?shù)，分析或修改它，并以同樣的方式返回。這意味著，插件不需要處理解析CSS和轉(zhuǎn)換回成一個字符串。因此很容易構(gòu)建自己的插件。

PostCSS可以用來寫出符合W3C的CSS。有很多插件，旨在實現(xiàn)新的W3C規(guī)范功能。這將使你寫一個標(biāo)準(zhǔn)的對未來版本兼容的css代碼。

怎樣使用PostCSS
安裝PostCSS，我們不會進(jìn)入太多有關(guān)設(shè)置的細(xì)節(jié)。我們會在命令行直接運行PostCSS。你可以在在Github的頁面上找到各構(gòu)建工具中如何使用PostCSS工具的詳細(xì)信息。
安裝PostCSS
PostCSS通過node與npm安裝，請確保已經(jīng)在開始前安裝了node。把PostCSS安裝在全局，代碼如下：

npm install -g postcss-cli

運行下面代碼，查看是否安裝上：

postcss --help

在屏幕會給你打出postcss接受的參數(shù)列表。也可以參照postcss-CLI documenation。
運行PostCSS
PostCSS安裝成功，下面做一個小DEMO。創(chuàng)建styles.css文件，并添加一些CSS樣式。例如，定義一個Flexbox的容器：

.container  { 
  display: flex
 }

Flexbox需要瀏覽器前綴才能在對應(yīng)的瀏覽器上運行。如果不想手動維護(hù)，Autoprefixer是PostCSS插件，完成自動維護(hù)的工作。它會基于can i use所提供的信息,自動添加供應(yīng)商前綴。下面將先放你如何使用Autoprefixer維護(hù)瀏覽器前綴。
安裝Autoprefixer，運行下面命令：

npm install -g autoprefixer

接下來，切換到項目文件夾，創(chuàng)建一個DIST文件夾，并把處理好的css放到里面：

mkdir dist

然后運行PostCSS：

postcss -u autoprefixer styles.css -d dist

上面命令的意思是：運行Autoprefixer 處理styles.css并輸出到DIST / styles.css。現(xiàn)在，打開DIST / Styles.css中會看到所有需要的瀏覽器前綴的css都已經(jīng)加上：

.container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;}

運行PostCSS -w標(biāo)識，會啟動一個watcher監(jiān)聽進(jìn)程，當(dāng)styles.css的文件被修改，則會自動處理。
插件配置我們可以根據(jù)需要來配置Autoprefixer的瀏覽器前綴。通過設(shè)置browsers選項來完成。當(dāng)通過命令行運行PostCSS，插件配置需要在.json文件中定義，例如，postcss.json。讓我們在當(dāng)前文件夾中創(chuàng)建文件，并配置Autoprefixer支持的瀏覽器的最新的2個版本。

{
  "autoprefixer": {
    "browsers": ["last 2 versions"]
  }}

現(xiàn)在可以重新運行PostCSS并根據(jù)新的配置文件監(jiān)聽：

postcss styles.css -u autoprefixer -c postcss.json -d dist -w

啟用source map
source map是用于調(diào)試編譯CSS必不可少的。PostCSS可以生成輸出文件內(nèi)聯(lián)source map，通過設(shè)置--map選項（或-m標(biāo)識）。
更多postcss插件
PostCSS有一個驚人的插件庫，包括測試，質(zhì)量檢查，回退，老的瀏覽器支持，內(nèi)聯(lián)資源,雪碧圖生成，優(yōu)化，新的語法支持，以及未來的CSS特性。正如前面提到的，你可以在插件的結(jié)構(gòu)目錄postcss.parts中找到。
做一個demo，使用幾個插件，展示一下PostCSS的作用。
CSS變量的自定義屬性插件
postcss-custom-properties插件的作用，實現(xiàn)對支持W3C自定義屬性規(guī)范（又名本地變量）。在選擇器的自定義屬性為任意值，并在樣式表其他地方引用。
這和less,sass中變量的功能相同：存放值和消除代碼重復(fù)。主要的區(qū)別是，作用域是有點不同; 類似于常規(guī)屬性，CSS自定義屬性沿元素級聯(lián)傳播，而不是塊級范圍。
下面是這個插件如何工作的一個例子。代碼：

:root {
  --container-width: 800px;}

.container {
  width: var(--container-width);}

將編譯為：

.container {
  width: 800px;}

自定義選擇器插件
postcss-custom-selectors插件實現(xiàn)了自定義選擇器規(guī)范。可以預(yù)先定義選擇器，并在后面引用它們。例如，我們可以保存所有標(biāo)題的一個選擇器，并重新使用它作為一個變量：

@custom-selector :--headings h1, h2, h3, h4, h5, h6;

:--headings {
  color: mediumblue;}

這將編譯如下：

h1,
h2,
h3,
h4,
h5,
h6 {
  color: mediumblue;}

俄羅斯樣式表插件
曾經(jīng)想學(xué)習(xí)俄語，但寫CSS太忙？不用擔(dān)心，現(xiàn)在可以用俄羅斯語寫CSS啦！只需使用俄語樣式插件。如下：

h1 { 
  размер-шрифта :  20 пикселей ; 
  цвет : красный ; 
  цвет-фона : белый ; 
  вес-шрифта : жирный ; }

它被翻譯成：

h1 {
  font-size: 20px;
  color: red;
  background-color: white;
  font-weight: bold;}

嗯......我從來沒有說過所有的插件都是有用的！
結(jié)束語
less和sass預(yù)處理器是偉大的。很大程度改善了我們的開發(fā)過程。但現(xiàn)在，停下來，重新思考以后的開發(fā)，這些工具是否還是最好的選擇。
我們不只是需要新的功能來寫樣式，我們還需要模塊化，更多的新標(biāo)準(zhǔn)，以及靈活的構(gòu)建進(jìn)程。PostCSS也是這樣做的，它可能會使CSS世界的游戲規(guī)則改變。
原文：An Introduction to PostCSS
原文鏈接：http://www.sitepoint.com/an-introduction-to-postcss/?utm_source=sitepoint&utm_medium=relatedinline&utm_term=html-css&utm_campaign=relatedauthor