Question

CSS 的预处理程序分别都有哪些优缺点

Answer 1

1、优点

CSS 预处理器是什么？一般来说，它们基于 CSS 扩展了一套属于自己的 DSL（领域特定语言），来解决我们书写 CSS 时难以解决的问题：

语法不够强大，比如无法嵌套书写导致模块化开发中需要书写很多重复的选择器；

没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护。

所以这就决定了 CSS 预处理器的主要目标：提供 CSS 缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性。这不是锦上添花，而恰恰是雪中送炭。

2、缺点

任何工具的诞生都是为了解决某一领域的特定问题，如果要挑缺点，简单来说CSS预处理器语言较CSS玩法变得更高级了，但同时降低了自己对最终代码的控制力。提高了入门门槛。

3、三种CSS 预处理器（框架）介绍

SASS，2007年诞生，最早也是最成熟的CSS预处理器，拥有ruby社区的支持和compass这一最强大的css框架，目前受LESS影响，已经进化到了全面兼容CSS的SCSS。

LESS，2009年出现，受SASS的影响较大，但又使用CSS的语法，让大部分开发者和设计师更容易上手，在ruby社区之外支持者远超过SASS，其缺点是比起SASS来，可编程功能不够，不过优点是简单和兼容CSS，反过来也影响了SASS演变到了SCSS的时代，著名的Twitter Bootstrap就是采用LESS做底层语言的。

Stylus，2010年产生，来自Node.js社区，主要用来给Node项目进行CSS预处理支持，在此社区之内有一定支持者，在广泛的意义上人气还完全不如SASS和LESS。

以上可参考如下文章：

再谈CSS预处理器：http://efe.baidu.com/blog/revisiting-css-preprocessors/

知乎上的回答：https://www.zhihu.com/question/20300388