开发速度提升；
代码优化效率提高（对开发者而言）；
代码更通俗易懂（对开发者而言）；
维护简单便捷；
代码更干净，优美；
功能更多更强，CSS做出JS的特效（其实就是JS）；
缺点：
舍弃用户体验来提高开发的效率，可以查考Bootstrap的缺点；
舍弃网页打开速度换取开发效率提升；
需要一个学习的过程，用之不当反而弄巧反拙；
总而言之，LESS/SASS缺点就是需要多一个编译器来重新编译一次你的CSS代码，也就是给浏览器多了一道工序，网页显示的速度会减慢（网页显示顺序，从上至下，一般CSS放在头部，先HTML DOM元素-->CSS-->脚本文件-->页面元素如图片，视频，音频--->最后完全显示）
SCSS 之类的预处理器本身就是为了生成 CSS 而设计的。它的优势在于开发效率高。对于一些样式复杂的站点，用 SASS 之类的工具生成代码比手写 CSS 快得多。但是 SASS 不是为了取代 CSS 而生的，它是为了服务 CSS 而生。或者类比一下，机器不能直接执行 C，它执行的是编译后的机器码。浏览器也不能直接渲染 SCSS，它渲染的是编译出来的 CSS。不过 SCSS 与 CSS 的关系和@郑诚所说的「jquery永远不可能取代javascript」有一点区别。 jQuery 是一个 JavaScript 的库而非生成 JavaScript 的工具，它是用 JavaScript 开发出来的；而 CSS 是标记语言。CSS 的一些框架如 lessframework 或者 normalize，它们之于 CSS 的关系更像 jQuery 之于 JavaScript。基本语法区别:在使用 CSS 预处理器之前最重要的是理解语法，幸运的是基本上大多数预处理器的语法跟 CSS 都差不多。
首先 Sass 和 Less 都使用的是标准的 CSS 语法，因此如果可以很方便的将已有的 CSS 代码转为预处理器代码，默认 Sass 使用 .sass 扩展名，而 Less 使用 .less 扩展名。
/* style.scss or style.less */h1 {color: #0982C1}12341234
这是一个再普通不过的，不过 Sass 同时也支持老的语法，就是不包含花括号和分号的方式：
/* style.sass */h1color: #0982c1123123
而 Stylus 支持的语法要更多样性一点，它默认使用 .styl 的文件扩展名，下面是 Stylus 支持的语法：
/* style.styl */h1 {color: #0982C1}/* omit brackets */h1color: #0982C1/* omit colons and semi-colons */h1color #0982C1123456789101112123456789101112
可以在同一个样式单中使用不同的变量，例如下面的写法也不会报错：
h1 {color #0982c1}h2font-size: 1.2em1234512345
