对于 Sass 、Scss、LESS 和 Stylus 的区别做的一个总结 :

CSS 预处理器 技术已经非常的成熟了，而且也涌现出了越来越多的 CSS 的预处理器框架。这篇文章是，对于 Sass 、Scss、LESS 和 Stylus 的区别做的一个总结 :

---

对应的 github 库 :

• sass scss: https://github.com/sass/ruby-sass ;
• less: https://github.com/less/less.js ;

• 什么是 CSS 预处理器 ?

CSS 预处理器 : 是一种语言用来为 CSS 增加一些编程的的特性，无需考虑浏览器的兼容性问题，例如你可以在 CSS 中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧，可以让 CSS  更见简洁，适应性更强，代码更直观等诸多好处。

• Sass 是什么 ?

Sass : (Syntactically Awesome Stylesheets)是一种 动态样式语言，Sass 语法属于缩排语法，比 css 比多出好些功能(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理，函数等)，更容易阅读。

 

• Scss 是什么 ? 

Scss : (sassy css) ,Sass 的缩排语法，对于写惯 css 前端的 web 开发者来说很不直观，也不能将 css 代码加入到 Sass 里面，因此 sass 语法进行了改良，Sass 3 就变成了 Scss(sassy css)。与原来的语法兼容，只是用 {} 取代了原来的缩进。

 

• Less 是什么 ？ 

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

 

•  Sass / Scss与 Less , Stylus区别 ：

编译环境不一样 ：

Sass 的安装需要 Ruby 环境，是在服务端处理的，而 Less 是需要引入 less.js 来处理 Less 代码输出 css 到浏览器，也可以在开发环节使用 Less，然后编译成 css 文件，直接放到项目中，也有 Less.app、SimpleLess、CodeKit.app 这样的工具，也有在线编译地址。

Sass 和 SCSS 区别 ：

SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：

1. 文件扩展名不同，Sass 是以 “.sass” 后缀为扩展名，而 SCSS 是以 “.scss” 后缀为扩展名；
2. 语法书写方式不同，Sass 是以严格的 缩进式语法规则 来书写，不带大括号 ({}) 和分号 (;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。

更多详细区别，请参考 ：https://blog.csdn.net/pedrojuliet/article/details/72887490 ；