Sass 和 Less 的区别

Sass 和 Less 是两种流行的 CSS 预处理器，它们帮助开发者编写更简洁、高效、可维护的 CSS 代码。尽管它们的目标相似，但在语法、特性和使用上有一些区别。

1. 语法差异

Sass

Sass 有两种语法：一种是 SCSS 语法，类似于 CSS；另一种是缩进语法，类似于 YAML。

SCSS 语法：

$primary-color: #333;body {color: $primary-color;
}

缩进语法：

$primary-color: #333bodycolor: $primary-color

Less

Less 的语法更接近 CSS，主要是通过引入变量和嵌套来扩展 CSS。

@primary-color: #333;body {color: @primary-color;
}

2. 变量声明

Sass 使用 $ 符号声明变量：
```
$primary-color: #333;
```
Less 使用 @ 符号声明变量：
```
@primary-color: #333;
```

3. 函数和运算

两者都支持函数和运算，但语法和内置函数库有所不同。

Sass 提供了强大的内置函数库，可以进行颜色操作、字符串操作、列表和映射操作等。
```
$width: 100px;
$double-width: $width * 2;
```
Less 也支持函数和运算，但一些复杂的操作可能需要手动实现。
```
@width: 100px;
@double-width: @width * 2;
```

4. 嵌套规则

两者都支持嵌套规则，方便编写层级结构清晰的 CSS。

Sass：

nav {ul {margin: 0;padding: 0;list-style: none;}li { display: inline-block; }a {display: block;padding: 6px 12px;text-decoration: none;}
}

Less：

nav {ul {margin: 0;padding: 0;list-style: none;}li { display: inline-block; }a {display: block;padding: 6px 12px;text-decoration: none;}
}

5. Mixin 和继承

两者都支持 Mixin（混合）和继承，但实现方式略有不同。

Sass 的 Mixin：

@mixin border-radius($radius) {-webkit-border-radius: $radius;-moz-border-radius: $radius;-ms-border-radius: $radius;border-radius: $radius;
}.box { @include border-radius(10px); }

Less 的 Mixin：

.border-radius(@radius) {-webkit-border-radius: @radius;-moz-border-radius: @radius;-ms-border-radius: @radius;border-radius: @radius;
}.box { .border-radius(10px); }