深入PostCSS Web設(shè)計目錄

時間：2023-06-24 00:09:01 | 來源：營銷百科

時間：2023-06-24 00:09:01 來源：營銷百科

深入PostCSS Web設(shè)計目錄：1 PostCSS簡介 1

編譯之美 2

PostCSS介紹 2

-- PostCSS的優(yōu)勢 3

-- PostCSS的陷阱 4

-- 消除誤解 5

-- 準(zhǔn)備工作 5

搭建開發(fā)環(huán)境 6

-- 安裝 PostCSS 8

-- 使用PostCSS創(chuàng)建一個簡單的示例 10

-- 添加 Source Map 功能 11

-- 壓縮樣式 13

-- 自動化編譯 15

代碼審查 16

-- PostCSS工作機(jī)制 20

-- 從 Sass 遷移到 PostCSS 21

小結(jié) 22

2　創(chuàng)建變量和混合宏 23

變量和混合宏簡介 23

-- 設(shè)置Sass 24

創(chuàng)建懸停效果示例 27

-- 使用 LESS編輯CSS 29

過渡到PostCSS 29

添加PostCSS變量支持 29

更新懸停效果示例 30

-- 進(jìn)一步思考 33

設(shè)置插件順序 35

使用PostCSS創(chuàng)建混合宏 36

更新我們的懸浮效果示例 37

-- PostCSS與標(biāo)準(zhǔn)處理器的比較 39

使用PostCSS循環(huán)內(nèi)容 41

-- 使用@each語句進(jìn)行遍歷 43

-- 切換到使用PostCSS 46

小結(jié) 47

3　嵌套規(guī)則 49

嵌套簡介 49

頁面導(dǎo)航 51

-- 示例的準(zhǔn)備工作 52

-- 從現(xiàn)有處理器進(jìn)行轉(zhuǎn)換 52

使用PostCSS插件進(jìn)行過渡 53

-- 將示例轉(zhuǎn)換成PostCSS生產(chǎn)模式 54

-- 代碼編譯 56

探索嵌套陷阱 57

-- 采取更好的方式 60

-- 重新審視我們的代碼 63

-- 更新代碼 64

切換到BEM 65

-- 創(chuàng)建一個簡單的消息盒 67

-- 編譯并修正代碼 70

-- 安裝 BEM支持 70

探索更多變化的細(xì)節(jié) 74

-- 修復(fù)錯誤 75

小結(jié) 77

4　創(chuàng)建媒體查詢 78

重溫媒體查詢 78

探索PostCSS自定義媒體查詢 79

-- 從普通CSS開始 81

-- 使用PostCSS修改案例 82

創(chuàng)建響應(yīng)式圖片 84

-- 使用PostCSS創(chuàng)建響應(yīng)式圖片 85

-- 響應(yīng)式圖片的實(shí)現(xiàn) 85

-- 添加高清圖片 88

-- 后續(xù)步驟 89

-- 探索媒體查詢的其他可能性 92

添加響應(yīng)式文本支持 93

優(yōu)化媒體查詢 96

改造對老版本瀏覽器的支持 97

遠(yuǎn)離響應(yīng)式設(shè)計 98

探索CSS4的媒體查詢功能 99

小結(jié) 100

5　管理顏色、圖片和字體 101

為網(wǎng)站添加顏色、字體及媒體元素 101

-- 維護(hù)資源鏈接 102

-- 自動鏈接到對應(yīng)資源 102

使用PostCSS管理字體 104

創(chuàng)建雪碧圖 106

-- 案例：創(chuàng)建一個信用卡圖標(biāo) 107

在PostCSS中使用SVG 110

-- 使用PostCSS修改圖標(biāo) 110

-- 更詳細(xì)地探究 111

-- 考慮替代方案 113

添加對WebP格式圖像的支持 113

-- 切換WebP圖像 114

-- 看下文件大小方面的差異 114

操作顏色和調(diào)色板 117

-- 使用調(diào)色盤展示和混色顏色 118

-- 案例的詳細(xì)解析 119

使用PostCSS創(chuàng)建顏色函數(shù) 120

-- 使用函數(shù)調(diào)整顏色 121

-- 解析案例 122

-- 使用PostCSS濾鏡創(chuàng)建顏色 123

-- 研究案例的細(xì)節(jié) 125

-- 和CSS3濾鏡對比 126

-- 給照片添加Instagram效果 127

小結(jié) 128

6　創(chuàng)建網(wǎng)格 130

網(wǎng)格設(shè)計的介紹 130

-- 自動化編譯過程 132

-- 為Bourbon Neat添加支持 134

使用Bourbon Neat創(chuàng)建一個實(shí)例 136

-- 深入了解我們的Demo 137

探索PostCSS中的網(wǎng)格插件 138

過渡到使用PostCSS-Neat 139

-- 完善我們的任務(wù)列表 141

-- 測試我們的配置 142

使用Neat和PostCSS來創(chuàng)建一個站點(diǎn) 144

-- 轉(zhuǎn)換成PostCSS 146

添加響應(yīng)式能力 147

-- 糾正設(shè)計稿 148

小結(jié) 151

7　動畫元素 152

回顧基本動畫 152

擺脫jQuery 153

-- 使用Transit.js庫制作動畫 155

-- 使用純JavaScript添加動畫 157

-- 使用jQuery來切換class 158

使用預(yù)構(gòu)建庫 160

-- 解析Demo中的代碼 161

切換到使用Sass 163

-- 創(chuàng)建一個動畫畫廊 164

-- 添加收尾工作 167

切換到使用PostCSS 170

探索PostCSS可用的插件選項(xiàng) 170

更新代碼以使用PostCSS 171

-- 測試我們修改的代碼 173

使用PostCSS創(chuàng)建一個Demo 174

-- 更新插件 174

-- 創(chuàng)建Demo 175

-- 詳細(xì)解析一下我們的Demo 176

優(yōu)化動畫 177

使用我們自己的動畫插件 178

更詳細(xì)地探索插件 180

小結(jié) 181

8　PostCSS 插件開發(fā) 182

使用插件擴(kuò)展 PostCSS 182

解析插件的基本結(jié)構(gòu) 183

-- index.js 184

-- package.json 184

-- test.js 186

-- Vendor 模塊 187

-- List 模塊 187

-- API 中的類 187

-- API 中的節(jié)點(diǎn) 188

-- API 中的方法 188

創(chuàng)建過渡插件 189

-- 創(chuàng)建測試 192

-- 修復(fù)錯誤 193

-- 清除最后的錯誤 195

-- 執(zhí)行測試 196

-- 分析代碼 197

創(chuàng)建字體插件 198

-- 插件功能分析 200

-- 發(fā)布的風(fēng)險 203

簡化開發(fā)流程 204

插件開發(fā)規(guī)范 205

發(fā)布插件 207

小結(jié) 208

9　簡寫型插件、降級插件和包型插件 209

簡寫型插件 209

包型插件 210

-- 使用簡寫屬性 211

Rucksack 和簡寫型插件 212

-- 示例講解 213

-- 安裝 Rucksack 214

-- 緩動動畫 214

-- 內(nèi)容動畫 216

-- 剖析代碼 217

-- 使用 Rucksack 修改輪播圖 218

-- 代碼分析 222

審查和優(yōu)化代碼 223

-- 使用 cssnano 224

-- 配置 Stylelint 226

降級處理 227

-- 檢測兼容性 228

-- Oldie 228

-- 刪除兼容性代碼 230

小結(jié) 232

10　定制處理器 233

創(chuàng)建處理器 233

探索處理器 234

-- 分析package.json文件 234

-- Gulp 任務(wù)文件 235

問題剖析 238

-- 修改 Gulp 任務(wù)文件 239

-- 更新背后的原因 242

優(yōu)化輸出結(jié)果 243

-- 優(yōu)化 Source Map 243

-- 瀏覽器前綴 245

-- 偽類選擇器 246

-- 更新代碼 247

-- 處理圖片 249

-- 解析圖片處理流程 250

添加自動重載功能 251

擴(kuò)展處理器的功能 252

測試最終的處理器 255

-- 示例分析 257

訣竅 258

-- CSStyle 259

-- CSStyle 的優(yōu)勢 260

-- 示例分析 261

小結(jié) 262

11　管理自定義語法 263

介紹自定義語法 263

準(zhǔn)備開發(fā)環(huán)境 264

實(shí)現(xiàn)自定義語法的插件 265

-- 解析內(nèi)容并修復(fù)錯誤 267

-- 解析SCSS內(nèi)容 268

-- 探索發(fā)生了什么 270

解析CSS 271

-- 替換RGBA顏色 273

-- 研究它是如何運(yùn)作的 274

使用API格式化輸出 275

-- 分析示例代碼 278

-- 添加Source Map 279

代碼高亮語法 279

-- 安裝主題 280

-- 創(chuàng)建一個HTML主題 281

小結(jié) 282

12　混合處理器 284

邁出第一步 284

探索轉(zhuǎn)換過程 285

-- 選擇插件 286

Pleeease簡介 287

-- 安裝和配置Pleeease 288

-- 手動編譯代碼 289

-- 使用任務(wù)編譯代碼 290

-- 使用Pleeease創(chuàng)建Demo 291

和其他處理器一起編譯代碼 292

使用PreCSS 292

在WordPress中安裝轉(zhuǎn)換器 293

配置生產(chǎn)環(huán)境 293

考慮轉(zhuǎn)換過程 294

修改代碼 295

-- 拆分樣式 296

-- 添加瀏覽器前綴 297

-- 檢查代碼的一致性 299

-- 壓縮代碼 299

-- 創(chuàng)建變量 300

-- 添加rem單位支持 302

-- 樣式表中的嵌套規(guī)則 303

-- 樣式表中的循環(huán)規(guī)則 304

-- 考慮未來的特性 305

編譯和測試修改代碼 305

小結(jié) 308

13　排除、解決PostCSS的相關(guān)問題 309

解決一些常見的問題 309

探索一些常見的問題 310

-- 與操作系統(tǒng)不兼容 310

-- '任務(wù)名稱'在gulp文件中找不到 311

-- 找不到模塊 312

-- 未定義引用的錯誤 313

-- 請?zhí)峁㏄ostCSS處理器數(shù)組對象 313

-- 條目未出現(xiàn)在package.json文件中 314

-- 編譯的結(jié)果不如預(yù)期 315

尋求別人的幫助 317

-- 在Stack Overflow記錄問題 317

-- 找到關(guān)于PostCSS的Bug 318

小結(jié) 319

14　為未來做準(zhǔn)備 320

支持CSS4 320

轉(zhuǎn)換CSS4樣式 321

-- 驗(yàn)證電子郵件地址 322

-- 支持 range輸入框 324

使用cssnext支持未來特性 326

-- 使用cssnext創(chuàng)建一個簡單網(wǎng)站 327

-- 創(chuàng)建Demo 327

創(chuàng)建CSS4擴(kuò)展功能插件 331

-- 添加支持CSS顏色特性 331

-- 回到過去 335

-- 創(chuàng)建自己的插件 337

小結(jié)^[1]