less和sass区别 - 技术栈

Less
- 语法接近原生 CSS，使用 {} 和 ; 分隔规则。
- 变量以 @ 开头（如 @color: #ff0000;）。
- 示例：
  复制代码
  less
  复制代码
```
`1@primary-color: #007bff;
2.button {
3  color: @primary-color;
4  &:hover { color: darken(@primary-color, 10%); }
5}`
```
Sass（SCSS）
- SCSS 语法完全兼容 CSS，变量以 $ 开头（如 $color: #ff0000;）。
- 传统 Sass 语法（.sass 文件）依赖缩进，无 {} 和 ;（较少使用）。
- 示例：
  复制代码
  scss
  复制代码
```
`1$primary-color: #007bff;
2.button {
3  color: $primary-color;
4  &:hover { color: darken($primary-color, 10%); }
5}`
```

结论：

Less
- 基于 JavaScript，可在浏览器端直接解析（通过 <script> 引入 Less.js），但通常通过 Node.js 服务端编译。
- 安装简单：npm install -g less。
Sass
- 基于 Ruby（传统实现），现代项目多用 dart-sass（纯 Dart 编写，性能更好）。
- 安装需通过 Ruby 或 Node.js 包（如 npm install -g sass）。

结论：

Less
- 变量分全局和局部，局部变量优先级更高（嵌套规则内可覆盖全局变量）。
- 示例：
  复制代码
  less
  复制代码
```
`1@color: red;
2.container {
3  @color: blue; // 局部变量
4  color: @color; // 输出 blue
5}`
```
Sass
- 变量默认全局，可通过 !default 设置默认值（未赋值时生效）。
- 示例：
  复制代码
  scss
  复制代码
```
`1$color: red !default;
2$color: blue; // 覆盖默认值
3.container { color: $color; } // 输出 blue`
```

结论：

Less
- 无原生逻辑控制（如条件、循环），需通过混合（Mixins）模拟简单条件。
- 示例（模拟条件）：
  复制代码
  less
  复制代码
```
`1.set-border(@width) when (isnumber(@width)) {
2  border: @width solid #ccc;
3}
4div { .set-border(2px); } // 生效`
```

Sass

完整支持逻辑控制 ：
- 条件：@if / @else
- 循环：@for / @while / @each
- 自定义函数：@function

示例：

复制代码

scss

复制代码

`1@mixin set-border($width) {
2  @if type-of($width) == number {
3    border: $width solid #ccc;
4  }
5}
6div { @include set-border(2px); } // 生效`

结论：

Less
- 混合：直接调用类名，类似 CSS 复用。
  复制代码
  less
  复制代码
```
`1.rounded-corners { border-radius: 5px; }
2header { .rounded-corners; } // 继承样式`
```
- 无原生继承：需通过混合模拟。
Sass
- 混合：用 @mixin 定义、@include 调用。
  复制代码
  scss
  复制代码
```
`1@mixin rounded-corners { border-radius: 5px; }
2header { @include rounded-corners; }`
```
- 继承：用 @extend 复用选择器规则，减少重复代码。
  复制代码
  scss
  复制代码
```
`1.error { color: red; }
2.serious-error { @extend .error; font-weight: bold; }`
```

结论：

Less
- 导入的文件默认合并到当前文件，生成一个 CSS 文件。
- 示例：
  复制代码
  less
  复制代码
```
`1@import "variables.less";`
```
Sass
- 支持部分文件（_partial.scss），导入时不生成额外 CSS 文件。
- 示例：
  复制代码
  scss
  复制代码
```
`1@import "variables"; // 导入 _variables.scss`
```

结论：