內容提要
PostCSS 是目前CSS 處理器中最流行的一個處理器。PostCSS 依託其強大的外掛程式生態系統，為CSS 處理器增加了無窮的可能性。
《深入PostCSS Web設計》共十四章內容，包括介紹PostCSS，創建變數和混合宏，嵌套規則，創建媒體查詢，管理顏色、圖片和字型，創建格線，動畫元素，PostCSS 外掛程式開發，簡寫型外掛程式、降級外掛程式和包型外掛程式，定製處理器，管理自定義語法，混合處理器，排除、解決PostCSS 的相關問題，為未來做準備。
以上內容將帶你深入了解PostCSS 以及如何使用PostCSS。如果你還沒有準備好去了解PostCSS 能做什麼，那么，請跟著《深入PostCSS Web設計》的步驟進行系統而深入的學習，你將進入到CSS 的全新世界。
目錄
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
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
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
小結
