12、利用PostCSS管理颜色、图像和字体

利用PostCSS管理颜色、图像和字体

1. 图像格式对比

在Google Chrome或Firefox中运行相同的 index.html ，起初可能看不出差异，但在Chrome开发者工具中查看编译后的源代码时，就能发现不同。项目区域的 img 文件夹中，原始JPEG图像大小为222 KB，而WebP格式仅重82 KB，能节省大量空间。

2. 颜色操作与调色板

在网站构建中，颜色的选择是开发者和设计师面临的挑战。无论负责选择色调，还是挑选合适的RGB或HEX颜色，都可能不会选择默认256色调色板中的颜色，而是更倾向于较浅或较深的色调，或者两种颜色的混合。

对于熟悉SASS的人来说，像 lighten() 、 darken() 或 saturate() 等函数并不陌生。而PostCSS的优势在于，它能为想摆脱对SASS依赖的人实现类似功能。

我们将结合两个PostCSS插件：
- postcss-color-palette （https://github.com/zaim/postcss-color-palette ）：允许从三个调色板中选择一种或多种颜色。
- postcss-color-mix （https://github.com/iamstarkov/postcss-color-mix ）：混合特定颜色以创建新颜色。

2.1 使用调色板显示和混合颜色

以下是操作