深入 PostCSS Web 設計 (Mastering PostCSS for Web Design)

PostCSS是目前CSS處理器中最流行的一個處理器。PostCSS依托其強大的插件生態系統，為CSS處理器增加了無窮的可能性。本書共十四章內容，包括介紹PostCSS，創建變量和混合宏，嵌套規則，創建媒體查詢，管理顏色、圖片和字體，創建網格，動畫元素，PostCSS插件開發，簡寫型插件、降級插件和包型插件，定製處理器，管理自定義語法，混合處理器，排除、解決PostCSS的相關問題，為未來做準備。以上內容將帶你深入瞭解PostCSS以及如何使用PostCSS。如果你還沒有準備好去瞭解PostCSS能做什麽，那麽，請跟著這本書的步驟進行系統而深入的學習，你將進入到CSS的全新世界。

作者簡介
Alex Libby從事IT支持工作，有近20年的多領域終端用戶支持經驗，目前在英國的一家全球經銷商擔任MVT測試開發者。雖然Alex的日常工作是和各種技術打交道，但他最關注的還是開源社區的動向，尤其是CSS/CSS3、jQuery和HTML5等技術。到目前為止，Alex已經通過Packt出版了10本技術書籍並參與了多本書籍的審校工作，涉及jQuery、HTML5視頻、Sass和CSS等技術，《深入PostCSS Web設計》是Alex通過Packt出版的第11本書。

譯者簡介
廖偉華，常用暱稱“大漠”，W3CPlus創始人，目前就職於淘寶。對HTML5、CSS和CSS處理器等前端腳本語言有非常深入的認識和豐富的實踐經驗，專注於CSS、CSS處理器和Web Animation技術的研究，是國內最早研究和使用CSS3和CSS處理器技術的一批人。CSS3、Sass和Drupal的中國佈道者。2014年出版著作《圖解CSS3：核心技術與案例實戰》。

1PostCSS簡介1 
編譯之美2 
PostCSS介紹2 
PostCSS的優勢3 
PostCSS的陷阱4 
消除誤解5 
準備工作5 
搭建開發環境6 
安裝PostCSS 8 
使用PostCSS創建一個簡單的示例10 
添加Source Map功能11 
壓縮樣式13 
自動化編譯15 
代碼審查16 
PostCSS工作機制20 
從Sass遷移到PostCSS 21 
小結22 

2創建變量和混合宏23 
變量和混合宏簡介23 
設置Sass 24 
創建懸停效果示例27 
使用LESS編輯CSS 29 
過渡到PostCSS 29 
添加PostCSS變量支持29 
更新懸停效果示例30 
進一步思考33 
設置插件順序35 
使用PostCSS創建混合宏36 
更新我們的懸浮效果示例37 
PostCSS與標準處理器的比較39 
使用PostCSS循環內容41 
使用@each語句進行遍歷43 
切換到使用PostCSS 46 
小結47 

3嵌套規則49 
嵌套簡介49 
頁面導航51 
示例的準備工作52 
從現有處理器進行轉換52 
使用PostCSS插件進行過渡53 
將示例轉換成PostCSS生產模式54 
代碼編譯56 
探索嵌套陷阱57 
採取更好的方式60 
重新審視我們的代碼63 
更新代碼64 
切換 到BEM 65 
創建一個簡單的消息盒67 
編譯並修正代碼70 
安裝BEM支持70 
探索更多變化的細節74 
修復錯誤75 
小結77 

4創建媒體查詢78 
重溫媒體查詢78 
探索PostCSS自定義媒體查詢79 
從普通CSS開始81 
使用PostCSS修改案例82 
創建響應式圖片84 
使用PostCSS創建響應式圖片85 
響應式圖片的實現85 
添加高清圖片88 
後續步驟89 
探索媒體查詢的其他可能性92 
添加響應式文本支持93 
優化媒體查詢96 
改造對老版本瀏覽器的支持97 
遠離響應式設計98 
探索CSS4的媒體查詢功能99 
小結100 

5管理顏色、圖片和字體101 
為網站添加顏色、字體及媒體元素101 
維護資源鏈接102 
自動鏈接到對應資源102 
使用PostCSS管理字體104 
創建雪碧圖106 
案例：創建一個信用卡圖標107 
在PostCSS中使用SVG 110 
使用PostCSS修改圖標110 
更詳細地探究111 
考慮替代方案113 
添加對WebP格式圖像的支持113 
切換WebP圖像114 
看下文件大小方面的差異114 
操作顏色和調色板117 
使用調色盤展示和混色顏色118 
案例的詳細解析119 
使用PostCSS創建顏色函數120 
使用函數調整顏色121 
解析案例122 
使用PostCSS濾鏡創建顏色123 
研究案例的細節125 
和CSS3濾鏡對比126 
給照片添加Instagram效果127 
小結128 

6創建網格130 
網格設計的介紹130 
自動化編譯過程132 
為Bourbon Neat添加支持134 
使用Bourbon Neat創建一個實例136 
深入了解我們的Demo 137 
探索PostCSS中的網格插件138 
過渡到使用PostCSS —Neat 139 
完善我們的任務列表141 
測試我們的配置142 
使用Neat和PostCSS來創建一個站點144 
轉換成PostCSS 146 
添加響應式能力147 
糾正設計稿148 
小結151 

7動畫元素152 
回顧基本動畫152 
擺脫jQuery 153 
使用Transit.js庫製作動畫155 
使用純JavaScript添加動畫157 
使用jQuery來切換class 158 
使用預構建庫160 
解析Demo中的代碼161 
切換到使用Sass 163 
創建一個動畫畫廊164 
添加收尾工作167 
切換到使用PostCSS 170 
探索PostCSS可用的插件選項170 
更新 碼以使用PostCSS 171 
測試我們修改的代碼173 
使用PostCSS創建一個Demo 174 
更新插件174 
創建Demo 175 
詳細解析一下我們的Demo 176 
優化動畫177 
使用我們自己的動畫插件178 
更詳細地探索插件180 
小結181 

8PostCSS插件開發182 
使用插件擴展PostCSS 182 
解析插件的基本結構183 
index.js 184 
package.json 184 
test.js 186 
Vendor模塊187 
List模塊187 
API中的類187 
API中的節點188 
API中的方法188 
創建過渡插件189 
創建測試192 
修復錯誤193 
清除最後的錯誤195 
執行測試196 
分析代碼197 
創建字體插件198 
插件功能分析200 
發布的風險203 
簡化開發流程204 
插件開發規範205 
發布插件207 
小結208 

9簡寫型插件、降級插件和包型插件209 
簡寫型插件209 
包型插件210 
使用簡寫屬性211 
Rucksack和簡寫型插件212 
示例講解213 
安裝Rucksack 214 
緩動動畫214 
內容動畫216 
剖析代碼217 
使用Rucksack修改輪播圖218 
代碼分析222 
審查和優化代碼223 
使用cssnano 224 
配置Stylelint 226 
降 級處理227 
檢測兼容性228 
Oldie 228 
刪除兼容性代碼230 
小結232 

10定制處理器233 
創建處理器233 
探索處理器234 
分析package.json文件234 
Gulp任務文件235 
問題剖析238 
修改Gulp任務文件239 
更新背後的原因242 
優化輸出結果243 
優化Source Map 243 
瀏覽器前綴245 
偽類選擇器246 
更新代碼247 
處理圖片249 
解析圖片處理流程250 
添加自動重載功能251 
擴展處理器的功能252 
測試最終的處理器255 
示例分析257 
訣竅258 
CSStyle 259 
CSStyle的優勢260 
示例分析261 
小結262 

11管理自定義語法263 
介紹自定義語法263 
準備開發環境264 
實現自定義語法的插件265 
解析內容並修復錯誤267 
解析SCSS內容268 
探索發生了什麼270 
解析CSS 271 
替換RGBA顏色273 
研究它是如何運作的274 
使用API格式化輸出275 
分析示例代碼278 
添加Source Map 279 
代碼高亮語法279 
安裝主題280 
創建一個HTML主題281 
小結282 

12混合處理器284 
邁出第一步284 
探索轉換過程285 
選擇插件286 
Pleeease 介287 
安裝和配置Pleeease 288 
手動編譯代碼289 
使用任務編譯代碼290 
使用Pleeease創建Demo 291 
和其他處理器一起編譯代碼292 
使用PreCSS 292 
在WordPress中安裝轉換器293 
配置生產環境293 
考慮轉換過程294 
修改代碼295 
拆分樣式296 
添加瀏覽器前綴297 
檢查代碼的一致性299 
壓縮代碼299 
創建變量300 
添加rem單位支持302 
樣式表中的嵌套規則303 
樣式表中的循環規則304 
考慮未來的特性305 
編譯和測試修改代碼305 
小結308 

13排除、解決PostCSS的相關問題309 
解決一些常見的問題309 
探索一些常見的問題310 
與操作系統不兼容310 
“任務名稱”在gulp文件中找不到311 
找不到＜name of plugin ＞模塊312 
＜name of task＞未定義引用的錯誤313 
請提供PostCSS處理器數組對象313 
條目未出現在package.json文件中314 
編譯的結果不如預期315 
尋求別人的幫助317 
在Stack Overflow記錄問題317 
找到關於PostCSS的Bug 318 
小結319 

14為未來做準備320 
支持CSS43 20 
轉換CSS4樣式321 
驗證電子郵件地址322 
支持range輸入框324 
使用cssnext支持未來特性326 
使用cssnext創建一個簡單網站327 
創建Demo 327 
創建CSS4擴展功能插件331 
添加支持CSS顏色特性331 
回到過去335 
創建自己的插件337 
小結340