[css] 16. Sass、LESS 是什么？大家为什么要使用他们？

[qiilee]

答案：他们是 CSS 预处理器。他是 CSS 上的一种抽象层。他们是一种特殊的语法/语言编译成 CSS。

例如 Less 是一种动态样式语言. 将 CSS 赋予了动态语言的特性，如变量，继承，运算， 函数. LESS 既可以在客户端上运行 (支持 IE 6+, Webkit, Firefox)，也可一在服务端运行 (借助 Node.js)。

为什么要使用它们？

结构清晰，便于扩展。

可以方便地屏蔽浏览器私有语法差异。这个不用多说，封装对浏览器语法差异的重复处理，减少无意义的机械劳动。

可以轻松实现多重继承。

完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。

[fanybook]

Scss 相当于新版的 Sass，是 Sass 3 的新语法

Sass不用花括号，使用缩进（像Python，stylus也是这样的）

#sidebar
  width: 30%
  background-color: #faa

Scss更像css，完全兼容css3，任何一本css3代码都可以认为是一本具有相同语义的有效的 scss 代码，它和 less 的明显区别是，less 的变量用@，scss的变量用$

#sidebar {
  width: 30%;
  background-color: #faa;
}

总结：虽然我都没怎么用过，但感觉在功能上 sass/scss 和 stylus 比 less 更强大，scss 和 less 的代码风格更接近于 css，而 sass 和 stylus 更像 Python

[qiilee]

Scss 相当于新版的 Sass，是 Sass 3 的新语法

Sass不用花括号，使用缩进（像Python，stylus也是这样的）

#sidebar
  width: 30%
  background-color: #faa

Scss更像css，完全兼容css3，任何一本css3代码都可以认为是一本具有相同语义的有效的 scss 代码，它和 less 的明显区别是，less 的变量用@，scss的变量用$

#sidebar {
  width: 30%;
  background-color: #faa;
}

总结：虽然我都没怎么用过，但感觉在功能上 sass/scss 和 stylus 比 less 更强大，scss 和 less 的代码风格更接近于 css，而 sass 和 stylus 更像 Python

已经给你发送了邀请，欢迎一起来维护这个项目。

[fanybook]

@qiilee 已接受，不过我是个后端刚转前端的，还比较菜，也在学习当中

[qiilee]

@fanybook 谦虚，共同学习吧