Sass、Less的区别

预处理器带来了什么

CSS (Cascading Style Sheets，层叠样式表)，是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言

CSS 预处理器通过引入一些特性，让 CSS 具备了编程的潜力，使 CSS 的编写更加动态

二者相似之处

Sass、Less 在语法上有些共性，比如下面这些：

• 支持变量
• 支持混入
• 支持运算

区别

编译环境

• Less 基于 JavaScript ，是在客户端处理的
• Sass 基于 Ruby ,是在服务端处理的

变量符号

Less 用 @，Sass 用 $

@color: #00c; /* 蓝色 */

$color: #00c; /* 蓝色 */

SCSS 支持条件语句，LESS 不支持

@if 条件 {

} @else {

}

@for $i from 1 to 10{

} // 不包含10;
@for $i from 1 through 10{

} // 包含10;

@each item in a, b, c, d{
    //item表示每一项
}

引用外部 CSS 文件方式不同

如果需要导入 SCSS 或者 Sass 文件，但又不希望将其编译为 CSS，只需要在文件名前添加下划线，这样会告诉 Sass 不要编译这些文件，但导入语句中却不需要添加下划线

例如，将文件命名为 _colors.scss，便不会编译_colors.css 文件

@import "colors";

颜色函数

调整色相时，SCSS 使用adjust_hue()，LESS 使用spin()

一些常见的疑问

Sass 与 Scss 是什么关系?

Sass的缩排语法并不直观，也不能将 CSS 代码加入到 Sass 里面，因此 Sass 语法进行了改良，Sass 3 就变成了Scss(sassy css)。与原来的语法兼容，只是用{}取代了原来的缩进。