PostCSS的基礎知識

　PostCSS現在已經普及了一段時間，如果您還沒有使用過它或不知道PostCSS是什么，那么我建議您看看這篇PostCSS簡介，該文章介紹了PostCSS的基礎知識，包括如何安裝和使用一些PostCSS插件。
　　
　　在本教程中，我將向您展示如何結合Gulp使用PostCSS，一個流行的自動化工具。由于這篇文章不是一個關于Gulp的入門教程，所以我不會涵蓋Gulp的基礎知識。但為了快速入門，您可以看看這篇Gulp.js簡介。
　　1.項目設置
　　在開始本教程之前，你應該創建一個項目文件夾用來工作。該文件夾內應該已經安裝了Gulp以及兩個內部文件夾，名稱分別為“initial”和“final”（或您選擇的其它名稱）。所謂的“initial”的文件夾將存放你的原材料和未加工的CSS代碼。 “initial”文件夾將存放處理過的文件，隨時可以使用。
　　在繼續之前，在您的項目文件夾中打開使用終端，運行以下命令：
　　npm install gulp-postcss --save-dev
　　PS：–save-dev補充：表示將正在安裝的插件作為依賴添加到project.json文件里。這將對多人合作模式有很大的幫助。當其他開發人員運行npm install在軟件包安裝命令，所有的插件將被自動安裝。
　　此時你的文件夾結構應該是：
　　initial —您的原始CSS文件的文件夾。
　　style.css —未處理的css樣式，我們將在稍后進行編輯。
　　final — 處理過的css文件的文件夾node_modules — 所有NPM模塊的文件夾
　　gulp — 當你安裝Gulp時創建的文件夾gulp-postcss —運行上面的命令后創建的文件夾。
　　guplfile.js —你的 Gulp文件package.json —你的 package.json 文件
　　2.安裝插件
　　開始之前，我們先安裝一些基本的插件。我們將要使用的插件是 short-color（一個顏色插件）。這個插件基本上擴展了現有的顏色屬性，并且可以設置第二個顏色值（將會被作為背景顏色）。運行以下命令來安裝 short-color。
　　npm install postcss-short-color --save-dev
　　你還可以同時安裝使用gulp-postcss和postcss-short-color ：
　　npm install gulp-postcss postcss-short-color --save-dev
　　這兩個插件安裝完畢后，你需要打開并編輯gulpfile.js文件，這樣就可以開始使用該插件工作。我們首先通過以下代碼來啟用這兩個插件：
　　vargulp = require（‘gulp’）; varpostcss = require（‘gulp-postcss’）; varshortColor = require（‘postcss-short-color’）;
　　現在，讓我們建立一個gulp任務來處理我們的原始的CSS文件，并創建一個準備就緒的樣式表。下面是代碼這樣做：
　　gulp.task（‘css’， function（）{returngulp.src（‘initial/*.css’） .pipe（postcss（［shortColor］）） .pipe（gulp.dest（‘final’））; }）;
　　我首先創建一個名為CSS的任務。當你要運行相應的功能時可以用到這個名字。您可以在gulp.src（）內部指定要處理的文件。使用*的CSS將處理“intial”文件夾內所有的CSS文件。
　　接下來，我們使用pipe（）函數來調用我們的所有插件。要做到這一點，我們需要將所有的插件作為參數傳遞給postcss（）函數。在我們的基本的例子中，我們實際上只有一個插件需要傳遞。 在下一節，我會告訴你如何傳遞多個插件。插件通過管道后，gulp.dest（）將被用于設置處理的文件的目的地。
　　為了測試，如果一切已正確設置，在“initial”文件夾內創建一個style.css文件。 style.css文件將有以下的CSS：
　　section{ color:white black; }
　　接下來，你需要在你的終端里運行gulp css命令。此刻，在您的“final”文件夾內，你應該會看到一個style.css文件，像下面的CSS 一樣：
　　section{ color:white; background-color:black; }
　　如果您CSS的樣式和上面所展示的CSS樣式一樣的話，我們就可以認為一切工作正常。
　　3.安裝多個插件
　　只使用一個基本的插件并不能從根本上減輕你的工作量。PostCSS有很多令人印象深刻的且令人難以置信的有用的插件，所以在大多數情況下，你需要使用到的插件不止一個。在本節中，我將告訴你如何在工作中同時使用多個插件。
　　您可能會發現有三個PostCSS插件（包）是非常有用的：即 short， cssnext和 autoprefixer
　　short將使你少寫并且速記大量的CSS屬性。 例如：
　　.heading{ font-size:1.25em 2; }
　　將會被解析成：
　　.heading{ font-size:1.25em; line-height:2; }
　　cssnext能夠在你的css樣式表中，使用最新的CSS語法。例如，下面的CSS：
　　.link{ color:color（green alpha（-10%））; }
　　將被轉換為：
　　.link{ background:rgba（0， 255， 0， 0.9）; }
　　最后，autoprefixer將會在您的CSS和轉換后的樣式文件中添加供應商前綴：
　　img{ filter:grayscale（0.9）; }
　　轉換為：
　　img{ -webkit-filter:grayscale（0.9）; filter:grayscale（0.9）; }
　　現在讓我們看看如何安裝這些插件，然后用它們來改造我們的樣式表。在項目目錄下運行下面的命令：
　　npm install autoprefixer postcss-short postcss-cssnext --save-dev
　　我們需要修改我們的gulp task來包含所有這些插件，代替用管道將所有這些插件一個一個的傳遞，我們將它們存儲在易于維護和簡潔的陣列。下面是我們的gulpfile.js的代碼：
　　vargulp = require（‘gulp’）; varpostcss = require（‘gulp-postcss’）; varautoprefixer = require（‘autoprefixer’）; varcssnext = require（‘postcss-cssnext’）; varshortcss = require（‘postcss-short’）; gulp.task（‘css’， function（）{varplugins = ［ shortcss， cssnext， autoprefixer（{browsers： ［‘》 1%’］， cascade： false}） ］; returngulp.src（‘initial/*.css’） .pipe（postcss（plugins）） .pipe（gulp.dest（‘final’））; }）;
　　您可能已經注意到了，我已經指定了Autoprefixer插件的一些選項。Autoprefixer輸出這些選項確定的CSS，在這種情況下，我說的是插件支持所有全球使用量超過1％的瀏覽器。我也被禁用級聯，讓所有的前綴和不帶前綴屬性左對齊。類似的選項也可用于大多數其他插件。
　　為了測試，如果一切正常，將出在樣式表下面的CSS：
　　.prefix-filter{ display:flex; }.cssshort-section{ text：#333bold justify uppercase 1.25em 1.7.05em; }.cssnext-link{ color:color（blue alpha（-10%））; }.cssnext-link:hover{ color:color（orange blackness（80%））; }
　　如果現在在終端中運行gulp css，你應該在“final”文件夾中可以得到style.css，如下：
　　.prefix-filter{ display：-webkit-box; display:flex; }.cssshort-section{ color：#333; font-weight:700; text-align:justify; text-transform:uppercase; font-size:1.25em; line-height:1.7; letter-spacing：.05em; }.cssnext-link{ color：#0000ff; color:rgba（0， 0， 255， 0.9）; }.cssnext-link:hover{ color:rgb（51， 33， 0）; }
　?。?。插件的執行順序
　　在最后一節的例子很清楚說明了PostCSS的實用性。所有PostCSS的力量在于它的插件。
　　我們具體來研究兩個插件 rgba-fallback 和 color-function， rgba-fallback插件會轉換一個RGBA顏色為16進制格式，color-function將改變CSS的color（）函數來兼容更多菜單CSS，比方說，你有一下的CSS：
　　body{ background:color（orange a（90%））; }
　　如果你運行的顏色功能插件之前的RGBA-后備插件，就像這樣：
　　var plugins =［ rgbafallback， colorfunction ］;
　　你將得到下面的CSS：
　　body{ background:rgba（255， 165， 0， 0.9）; }
　　正如你所看到的，在處理CSS時沒有RGBA回退。這樣的異常原因是回退插件運行時，它發現背景是color（orange a（90%）），并且不知道該怎么辦。后來，color函數插件執行，并從原來的color函數創建RGBA顏色值。
　　如果你扭轉插件順序，按以下順序運行它們：
　　var plugins =［ colorfunction， rgbafallback ］;
　　最后的CSS是這樣的：
　　body{ background：#ffa500; background:rgba（255， 165， 0， 0.9）}
　　這一次的顏色插件首先把背景色的RGBA值和后備插件層增加一個十六進制回退。
　　總結
　　在本教程中我已經介紹了使用gulp和PostCSS一起使用的基本知識。隨著插件和gulp的正確組合，可以節省開發的許多時間和避免不必要的麻煩。如果您有任何技術問題或建議，請盡管在本教程的下面進行評論，以便于我們能更好的學習交流。
?