为什么要使用css的预处理器

什么是css的预处理器

例如：less, sass, stylus，目的都是为了增强css代码的复用性。包括预处理器里面的层级，mixin，变量，循环，函数等对编写以及开发时使用的UI组件都极其方便

css预处理器使得css中也能使用一些编程特性，也无需考虑浏览器的兼容性问题，可以在css中使用变量和简单的函数逻辑程序以及函数等在编程语言中的一些基本功能，让css变得更加简洁，增加了适应性以及可读性，可维护性等等

总结使用css预处理器的原因

• 结构清晰，扩展方便
• 轻松实现了多重继承
• 兼容了css代码，可以应用在老项目中

顺便介绍一下后处理器

说起后处理器，不得不提postCss ,通常是在完成的样式表中根据css规范处理css，让其更加有效。目前最常做的是给css属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。

例如移动端经常需要转换为rem单位，所以可以使用px2rem的postcss插件来进行编译时转换

postcss能做什么？以下引自postcss官网：

• 解决全局css问题 postcss-modules 和 react-css-modules 可以自动以组件为单位隔绝 CSS 选择器。

• 提前使用先进的 CSS 特性 autoprefixer/postcss-preset-env

• 更佳的 CSS 可读性 precss 囊括了许多插件来支持类似 Sass 的特性，比如 CSS 变量，套嵌，mixins 等。 postcss-utilities 囊括了最常用的简写方式和书写帮助。

• 图片和字体 postcss-assets 可以插入图片尺寸和内联文件。 postcss-sprites 能生成雪碧图。 postcss-inline-svg 允许你内联 SVG 并定制它的样式。 postcss-write-svg 允许你在 CSS 里写简单的 SVG。

• 提示器（Linters） doiuse 提示 CSS 的浏览器支持性，使用的数据来自于 Can I Use。