深入PostCSS Web设计
2020-04-09 17:18:47 0 举报AI智能生成
深入PostCSS Web设计
作者其他创作
大纲/内容
8 PostCSS插件开发
使用插件扩展 PostCSS
解析插件的基本结构
index.js
package.json
test.js
Vendor 模块
List 模块
API 中的类
API 中的节点
API 中的方法
创建过渡插件
创建测试
修复错误
清除最后的错误
执行测试
分析代码
创建字体插件
插件功能分析
发布的风险
简化开发流程
插件开发规范
发布插件
小结
9 简写型插件、降级插件和包型插件
简写型插件
包型插件
使用简写属性
Rucksack 和简写型插件
示例讲解
安装 Rucksack
缓动动画
内容动画
剖析代码
使用Rucksack修改轮播图
代码分析
审查和优化代码
使用 cssnano
配置 Stylelint
降级处理
检测兼容性
Oldie
删除兼容性代码
小结
10 定制处理器
创建处理器
探索处理器
分析package.json文件
Gulp 任务文件
问题剖析
修改Gulp任务文件
更新背后的原因
优化输出结果
优化Source Map
浏览器前缀
伪类选择器
更新代码
处理图片
解析图片处理流程
添加自动重载功能
扩展处理器的功能
测试最终的处理器
示例分析
诀窍
CSStyle
CSStyle 的优势
示例分析
小结
11 管理自定义语法
介绍自定义语法
准备开发环境
实现自定义语法的插件
解析内容并修复错误
解析SCSS内容
探索发生了什么
解析CSS
替换RGBA颜色
研究它是如何运作的
使用API格式化输出
分析示例代码
添加Source Map
代码高亮语法
安装主题
创建一个HTML主题
小结
12 混合处理器
迈出第一步
探索转换过程
选择插件
Pleeease简介
安装和配置Pleeease
手动编译代码
使用任务编译代码
使用Pleeease创建Demo
和其他处理器一起编译代码
使用PreCSS
在WordPress中安装转换器
配置生产环境
考虑转换过程
修改代码
拆分样式
添加浏览器前缀
检查代码的一致性
压缩代码
创建变量
添加rem单位支持
样式表中的嵌套规则
样式表中的循环规则
考虑未来的特性
编译和测试修改代码
小结
13 排除、解决PostCSS的相关问题
解决一些常见的问题
探索一些常见的问题
与操作系统不兼容
任务名称 在gulp文件中找不到
找不到＜name of plugin＞模块
＜name of task＞未定义引用的错误
请提供PostCSS处理器数组对象
条目未出现在package.json文件中
编译的结果不如预期
寻求别人的帮助
在Stack Overflow记录问题
找到关于PostCSS的Bug
小结
14 为未来做准备
支持CSS4
转换CSS4样式
验证电子邮件地址
支持 range输入框
使用cssnext支持未来特性
使用cssnext创建一个简单网站
创建Demo
创建CSS4扩展功能插件
添加支持CSS颜色特性
回到过去
创建自己的插件
小结
1 PostCSS简介
编译之美
PostCSS介绍
PostCSS的优势
PostCSS的陷阱
消除误解
准备工作
搭建开发环境
安装 PostCSS
使用PostCSS创建一个简单的示例
添加Source Map功能
压缩样式
自动化编译
代码审查
PostCSS 工作机制
从Sass迁移到PostCSS
小结
2 创建变量和混合宏
变量和混合宏简介
设置Sass
创建悬停效果示例
使用 LESS编辑CSS
过渡到PostCSS
添加PostCSS变量支持
更新悬停效果示例
进一步思考
设置插件顺序
使用PostCSS创建混合宏
更新我们的悬浮效果示例
PostCSS与标准处理器的比较
使用PostCSS循环内容
使用@each语句进行遍历
切换到使用PostCSS
小结
3 嵌套规则
嵌套简介
页面导航
示例的准备工作
从现有处理器进行转换
使用PostCSS插件进行过渡
将示例转换成PostCSS生产模式
代码编译
探索嵌套陷阱
采取更好的方式
重新审视我们的代码
更新代码
切换到BEM
创建一个简单的消息盒
编译并修正代码
安装 BEM支持
探索更多变化的细节
修复错误
小结
4 创建媒体查询
重温媒体查询
探索PostCSS自定义媒体查询
从普通CSS开始
使用PostCSS修改案例
创建响应式图片
使用PostCSS创建响应式图片
响应式图片的实现
添加高清图片
后续步骤
探索媒体查询的其他可能性
添加响应式文本支持
优化媒体查询
改造对老版本浏览器的支持
远离响应式设计
探索CSS4的媒体查询功能
小结
5 管理颜色、图片和字体
为网站添加颜色、字体及媒体元素
维护资源链接
自动链接到对应资源
使用PostCSS管理字体
创建雪碧图
案例：创建一个信用卡图标
在PostCSS中使用SVG
使用PostCSS修改图标
更详细地探究
考虑替代方案
添加对WebP格式图像的支持
切换WebP图像
看下文件大小方面的差异
操作颜色和调色板
使用调色盘展示和混色颜色
案例的详细解析
使用PostCSS创建颜色函数
使用函数调整颜色
解析案例
使用PostCSS滤镜创建颜色
研究案例的细节
和CSS3滤镜对比
给照片添加Instagram效果
小结
6 创建网格
网格设计的介绍
自动化编译过程
为Bourbon Neat添加支持
使用Bourbon Neat创建一个实例
深入了解我们的Demo
探索PostCSS中的网格插件
过渡到使用PostCSS-Neat
完善我们的任务列表
测试我们的配置
使用Neat和PostCSS来创建一个站点
转换成PostCSS
添加响应式能力
纠正设计稿
小结
7 动画元素
回顾基本动画
摆脱jQuery
使用Transit.js库制作动画
使用纯JavaScript添加动画
使用jQuery来切换class
使用预构建库
解析Demo中的代码
切换到使用Sass
创建一个动画画廊
添加收尾工作
切换到使用PostCSS
探索PostCSS可用的插件选项
更新代码以使用PostCSS
测试我们修改的代码
使用PostCSS创建一个Demo
更新插件
创建Demo
详细解析一下我们的Demo
优化动画
使用我们自己的动画插件
更详细地探索插件
小结
0 条评论
下一页
