scss和less的区别

Sass(Scss)、Less 都是 CSS 预处理器，他们定义了一种新的语言，其基本思想是，用一种专门的编程语言为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行 CSS 的编码工作。

为什么要使用 CSS 预处理器

原因

• CSS 仅仅是一个标记语言，不可以自定义变量，不可以引用。
• 语法不够强大，比如无法嵌套书写，导致模块化开发中需要书写很多重复的选择器。
• 没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护。

CSS 预处理器的好处

• 提供 CSS 层缺失的样式层复用机制
• 减少冗余代码
• 提高样式代码的可维护性

CSS 预处理器的缺点

• 开发工作流中多了一个环节，调试也变得更麻烦。
• 预编译很容易造成后代选择器的滥用

相同之处

• 都属于 CSS 预处理器
• 目的是使得 CSS 开发更灵活和更强大
• 扩展的 CSS 功能特性基本相同

区别之处

• Sass 是在服务端处理的，以前是 Ruby，现在是 Dart-Sass 或 Node-Sass，而 Less 是在客户端处理的，需要引入 less.js 来处理 Less 代码输出 CSS 到浏览器，也可以在开发服务器将 Less 语法编译成 CSS 文件，输出 CSS 文件到生产包目录，有 npm less、Less.app、SimpleLess、CodeKit.app 这样的工具，也有在线编译地址。
• 变量符不一样，Less 是 @，而 Sass 是 $。
• Sass 的功能比 Less 强大，基本可以说是一种真正的编程语言。Less 只是一套自定义的语法及一个解析器，为 CSS 加入动态语言的特性。
• Less 相对 Sass 清晰明了，安装便捷，易于上手，对编译环境要求比较宽松，适合小型项目。Sass 更适用于复杂或大型项目。
• Sass 支持条件语句，可以使用 if...else.../for...while...each循环等，Less 不支持。
• Less 中的变量运算可以带或不带单位，Sass 需要带单位。