編輯推薦

　　 PostCSS是一種工具，一款已成長為像Sass和LESS一樣主流的處理器，這一切都歸功於它的強大、速度和易用性。《深入PostCSS Web設計》是使用PostCSS的完全指南，《深入PostCSS Web設計》將指導你如何編寫優秀的樣式，並將其運用到Web頁麵，同時讓你的樣式保持可維護性。這《深入PostCSS Web設計》將嚮你展示如何利用PostCSS簡化樣式錶的整個過程。它涵蓋瞭給Web頁麵添加動態的、現代的樣式特性的各種技術。隨著內容的深入，你將學習如何使用PostCSS來讓CSS更具模塊化的特性、更易於維護。讀完《深入PostCSS Web設計》，你將掌握如何給Web添加CSS樣式錶，以及如何創建高執行，可維護的樣式錶。

　　◎添加支持PostCSS的混閤宏、變量以及條件支持。

　　◎探索代碼嵌套的不同方式，如BEM和PostCSS的嵌套。

　　◎使用PostCSS優化媒體查詢，獲得*佳性能。

　　◎使用PostCSS處理器給元素，如圖像、字體、網格、SVG和高清圖像添加樣式。

　　◎熟悉使用插件和使用PostCSS API擴展插件。

　　◎定製自己的處理器並在不同的網站上測試，比如WordPress。

　　◎在PostCSS中編寫一個自定義語法，如類似Sass、LESS或Stylus處理器的語法。

　　◎提供對未來的CSS特性（如CSS4特性和一些CSS3特性）的支持。

內容簡介

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：核心技術與案例實戰》。

目錄

1 PostCSS簡介 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
７　動畫元素 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
8　PostCSS 插件開發 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
支持CSS4 320
轉換CSS4樣式 321
★驗證電子郵件地址 322
★支持 range輸入框 324
使用cssnext支持未來特性 326
★使用cssnext創建一個簡單網站 327
★創建Demo 327
創建CSS4擴展功能插件 331
★添加支持CSS顔色特性 331
★迴到過去 335
★創建自己的插件 337
小結

前言/序言

譯者序

眾所周之，任何一個Web頁麵或者Web應用程序都離不開CSS。CSS規範從最初的CSS1到現在的CSS3，再到CSS規範的下一個版本，規範本身一直處於不斷發展的演化之中。這給開發人員帶來瞭效率上的提高。不過與其他Web領域的規範處境相似，CSS規範在瀏覽器兼容性方麵一直存在各種各樣的問題。不同瀏覽器在CSS規範實現方麵的進度也存在很大差異。另外CSS規範本身的發展速度與社區的期待還有一定的差距，這也是為什麼Sass、LESS和Stylus等CSS處理器可以流行的重要原因。Sass、LESS和Stylus等CSS處理器提供瞭很多更實用的功能，也體現瞭開發人員對CSS語言的需求。而本書介紹的PostCSS是目前CSS處理器中最流行的一個處理器。PostCSS依托其強大的插件生態係統，為CSS處理器增加瞭無窮的可能性。

PostCSS本身是一個功能比較單一的工具。它提供瞭一種使用JavaScript代碼處理CSS的方式。它負責把CSS代碼解析成抽象語法樹結構，再交給插件進行處理。插件基於CSS代碼的AST所能進行的操作是多種多樣的，比如可以支持變量、混閤宏、嵌套，增加瀏覽器相關的私有前綴，或是把符閤未來的CSS規範的樣式規則轉譯成當前CSS規範支持的格式。從這個角度來說，PostCSS的強大之處在於其不斷發展的插件體係或者說其插件生態。目前PostCSS已經有200多個功能各異的插件。開發人員也可以根據項目的需求，開發齣自己的PostCSS插件。最為慶幸的是，來自全球各地的PostCSS插件開發人員根據自己項目的需求開發齣不同的功能插件，並且將這些插件開源貢獻給其他有需要的開發人員使用。

PostCSS從誕生之時就給社區帶來瞭對其類彆進行劃分的爭議。這主要是由於其名稱中的Post，Post很容易讓人聯想到PostCSS是用來做CSS後處理的，從而將其與已有的CSS處理（以前我常稱之為CSS預處理器）語言，比如Sass、Less和Stylus等進行對比。實際上，PostCSS的主要功能隻有兩個：第一個功能是前麵提到的把CSS解析成JavaScript可以操作的AST，第二個功能是調用插件來處理AST並得到結果。因此，不能把PostCSS簡單地歸類成CSS預處理器或後處理器。PostCSS所能執行的任務非常多，其同時涵蓋瞭傳統意義上的預處理和後處理。PostCSS是一個全新的工具，給開發人員帶來瞭不一樣的處理CSS的方式。而且這種方式提高瞭Web開發人員編寫CSS的效率，更降底瞭個人或者團隊管理和維護CSS的成本，特彆是針對於一個大型的項目，這種優勢體現得更為明顯。

如果你想真正瞭解PostCSS的話，你應該盡快學會PostCSS是什麼以及如何使用它。

本書通過十四章的內容帶你深入瞭解PostCSS以及如何使用PostCSS。如果你還沒有準備好去瞭解PostCSS能做什麼，那麼，請跟著這本書的步驟進行係統而深入的學習，你將進入到CSS的全新世界。

我們能夠使用這麼優秀的CSS處理器來編寫、維護和管理CSS，需要特彆感謝@Andrey Sitnik，是他給我們創造瞭這麼強大的處理器，並且讓PostCSS以一個驚人的速度發展，越來越多的人開始瞭解它、使用它。

我們也要特彆感謝@Alex Libby，是他花費瞭大量時間和精力為我們編寫瞭一本深入淺齣，帶我們一步一步瞭解PostCSS的所有內容的優秀圖書。如果你認真閱讀完本書，你將能熟練地使用PostCSS，藉助JavaScript編寫齣自己想要的PostCSS插件，甚至還可以定製一個屬於自己或團隊的CSS處理器。

我在本書的翻譯過程中得到瞭電子工業齣版社的張春雨、田誌遠以及其他工作人員的幫助，在此一並錶示由衷的感謝。

本書主要由我和南北、彥子和靜子幾位譯者共同翻譯。雖然我們經常參與社區前端技術文檔的翻譯，但翻譯圖書還是初次，因此全書難免存在一些錯誤或者不當之處，敬請廣大讀者批評指正。譯者非常願意通過微博（http://weibo.com/w3cplus）或電子郵件（w3cplus@hotmail.com）與各位同行探討有關PostCSS或CSS處理器的相關技術問題。

大 漠

2017年6月於杭州

好書推薦一下

非常不錯的書，正在看

追緊大前端的潮流發展！！

據說是未來的趨勢，好評。

好書推薦一下

單位圖書館購書，整體來說速度快，圖書正版。

非常好非常好非常好非常好非常好非常好非常好非常好非常好非常好非常好非常好非常好非常好非常好非非常好非常好非常好非常好非常好非常好非常好非常好非常好非常好非常好非常好非常好非常好非常好非非常好非常好非常好非常好非常好非常好非常好非常好非常好非常好非常好非常好非常好非常好非常好非非常好非常好非常好非常好非常好非常好非常好非常好非常好非常好非常好非常好非常好非常好非常好非非常好非常好非常好非常好非常好非常好非常好非常好非常好非常好非常好非常好非常好非常好非常好非非常好非常好非常好非常好非常好非常好非常好非常好非常好非常好非常好非常好非常好非常好非常好非非常好非常好非常好非常好非常好非常好非常好非常好非常好非常好非常好非常好非常好非常好非常好非非常好非常好非常好非常好非常好非常好非常好非常好非常好非常好非常好非常好非常好非常好非常好非常好非常好非常好非常好非常好非常好非常好非常好非常好非常好非非常好非常好非常好非常好非常好非常好非常好非常好非常好非常好非常好非常好非常好非常好非常好非非常好非常好非常好非常好非常非非常好非常好非常好非常好非常好非常好非常好非常好非常好好非常好非常好非常好非常好非

開拓知識麵

講的很詳細，學起來不費勁