css预处理器和后处理器

学习参考：​​​​​​前端面试必问的CSS知识点 - 知乎 

 

前处理器/预处理器：将类css代码编译处理成浏览器可解析的真正 CSS。增强了 CSS 代码的复用性，还有嵌套、变量、循环、函数、mixin 等，具有很方便的 UI 组件模块化开发能力。

通俗点讲就是将sass、Less、Stylus此类语言转换为浏览器认识的css

预处理器普遍会具备这样的特性： 

• 嵌套代码的能力，通过嵌套来反映不同 css 属性之间的层级关系 ；
• 支持定义 css 变量；
• 提供计算函数；
• 允许对代码片段进行 extend 和 mixin；
• 支持循环语句的使用；
• 支持将 CSS 文件模块化，实现复用

 

后处理器：美化css，或者将没有使用到的css不做编译 ,例如postCss、cssnano、purgecss、autoprefix

和预处理器的不同就在于，预处理器处理的是 类CSS，而 PostCss 处理的就是 CSS 本身。Babel 可以将高版本的 JS 代码转换为低版本的 JS 代码。PostCss 做的是类似的事情：它可以编译尚未被浏览器广泛支持的先进的 CSS 语法，还可以自动为一些需要额外兼容的语法增加前缀。更强的是，由于 PostCss 有着强大的插件机制，支持各种各样的扩展，极大地强化了 CSS 的能力。

后处理器普遍会具备这样的特性：

• 提高 CSS 代码的可读性：PostCss 其实可以做类似预处理器能做的工作；
• 当我们的 CSS 代码需要适配低版本浏览器时，PostCss 的 Autoprefixer 插件可以帮助我们自动增加浏览器前缀；
• 允许我们编写面向未来的 CSS：PostCss 能够帮助我们编译 CSS next 代码；d