登录免费注册



深入PostCSS Web设计

首页  思维导图  详情



深入PostCSS Web设计

2020-04-09 17:18:47   0  举报





AI智能生成

深入PostCSS Web设计

深入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

优化动画

使用我们自己的动画插件

更详细地探索插件

小结

 Collect

Get Started

web端

 Collect

Get Started

web chat logic

 Collect

Get Started

web

 Collect

Get Started

传统Web应用













评论

0 条评论

下一页



图形选择

思维导图

主题

补充说明

AI生成





修改AI描述

去编辑

重新生成

提示 

关闭后当前内容将不会保存，是否继续？

取消

确定

Document