css作为前端三剑客，从诞生以来很少变化，css3都已经诞生了20年，和js的框架层出不穷相比，似乎css就不需要框架，就不需要更优化的写法。然而在追求极致的程序员面前，代码的可维护性，代码的优雅性有着迫切希望改进css代码的编写，于是css预处理器诞生了。

css预处理器

由于浏览器只能理解和识别纯CSS语法，因此不能简单地用全新的语言代替它。但是，目前的css确实有一些局限性，这在小型项目中可能并不重要，但是在处理庞大的样式表时确实会付出巨大的代价。要变通解决此问题，开发人员发明了CSS预处理器。本质上，预处理器是具有自己独特语法的程序。您编写代码后，他们会将其编译为纯CSS。这和现在流行的TS是一个道理。

我们使用CSS预处理程序的原因是添加CSS否则无法提供的其他功能。例如，我们可能具有嵌套或继承选择器，以及mixins（可重用的声明包）。预处理器便捷的附加功能使我们在书写css的时候更加高效，并且可以灵活配置。

Sass与SCSS

Sass是预处理器的鼻祖，它诞生于2006年，很多后来的预处理器都从它这里借鉴了大量思想。

到目前为止，它具有两种单独的语法：Sass和SCSS。是的，Sass和SCSS只是Sass的两种语法，其中SCSS是在Sass第三个版本中引入的，它采用了和之前不一样的语法。

Sass和SCSS之间的主要区别在于，SCSS与CSS一样使用分号和方括号。另一方面，Sass它使用等号而不是冒号进行赋值。尽管现在SCSS已经正式成为Sass CSS预处理程序的主要语法，但是还没有计划弃用原始版本的计划。

Less

Less最早出现在2009年。它受Sass的影响，但对后来引入的SCSS格式有影响。因为与Sass语法的第一个版本不同，所以此CSS预处理程序最初是为了尽可能地与纯CSS类似而创建的。这不仅意味着学习它会很快上手，而且还可以使用在Less中有效的任何预编写CSS代码。Less CSS预处理器本身是用JavaScript编写的，这也简化了设置。

比较Less与Sass，我们会发现它们的基本功能非常相似。它们都允许嵌套，导入和使用变量。但是，在Less中，您还可以提升变量并从Sass无法使用的颜色中提取某些成分，即色调，饱和度，光度和亮度。另一方面，Sass允许您使用if语句并将其插入选择器和属性名称中。它的语法还包含三元运算符和嵌套收集器。

Less的另一个小缺点是使用@符号进行变量声明（Sass使用$符号代替）。但是，在CSS中，@也可以用于关键帧和媒体查询。在阅读代码时，这可能会引起一些混乱。

Stylus

Stylus诞生于2010年。尽管它的用户群明显少于Sass或Less，但仍然值得研究。Stylus是用Node.js编写的，因此对于那些已经熟悉nodejs环境的人来说是一个不错的选择。同时它也具有内置函数和mixin。

Stylus与众不同之处在于其灵活性：冒号，分号和逗号都是可选的。此外，我们不需要花括号来定义代码块：Stylus使用缩进代替符号。对于变量，我们可以像在Sass中那样使用 $ 符号，但是也可以不使用它，这一切都由我们自己决定。

用最少的代码写出样式是Stylus一直追求的，然而这也可能导致代码可能不易于阅读，但是这主要看个人，毕竟一些新事物的诞生，本身就需要花费一些时间。

PostCSS

PostCSS是不是实际上是一个CSS预处理器。因为它可以用作预处理器，后处理器，实际上它是各种处理器，它们也可以帮助您优化，清理代码以及执行各种其他任务。本质上讲，PostCSS是一个具有大量可启用JavaScript插件的API（。使用它们，您可以处理CSS并创建自定义工具。

PostCSS最初于2013年发布。您可以将其与普通CSS语法和上述预处理器一起使用。它最大的优点就是模块化，我们需要的各个功能都可以通过引入各个模块完成，因此，它的效率是非常高的。

总结

虽然我们说了这么多预处理器的好处，但是它也并不是没有缺点，比如css的调试，需要编译，文件过大都是它的缺点。

当然，我们考虑一件事情的时候，一定是会分析它的利弊的，相对于变量，混入，嵌套，易于维护的这些优雅的功能，它的优点已经可以大大弥补它的缺点了。

不要过多纠结到底选择哪一个css预处理器，重要的是先选择一个上手，你会发现自己会慢慢爱上它们的。