深入PostCSS Web设计目录

时间：2023-06-24 00:09:01 | 来源：营销百科

时间：2023-06-24 00:09:01 来源：营销百科

深入PostCSS Web设计目录：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

-- 找不到模块 312

-- 未定义引用的错误 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

小结^[1]