1️⃣ 前言

今天看到群友提到这两个 CSS 预处理器

而我早前就知道它们的存在了，不过没有深究，今天乘着刚好看到了，于是就去找 GPT 唠了唠 😋

2️⃣ 关于Sass

这个是我接触的比较多的（Less 我几乎没在任何项目中使用过），其中也有一些值得诟病的地方，即 sass 需要配合其版本所对应的 node-sass 进行使用，以及一些环境上的问题

About GPT

那就是说less对于环境上的要求会sass要更低，是这样吗 ？

是的，Less 相对于 Sass 来说环境要求会更加宽松一些。

Less 可以直接在浏览器中编译，因此不需要安装额外的工具或依赖，只需要在 HTML 文件中引入 Less.js 即可。同时，Less 也可以通过 Node.js 的编译器来编译，但是相比 Sass，没有那么多依赖和插件需要安装。

相比之下，Sass 需要 Ruby 环境的支持，并且在使用 Sass 编译器时需要安装 node-sass 或其他相关的编译器。这可能会带来一些环境上的限制，例如需要安装特定版本的 Node.js 和 Ruby，而且有些情况下可能需要手动配置环境变量等。

总的来说，在选择预处理器时，应该根据项目需求和开发环境来综合考虑，选择适合自己的工具和方案。无论您选择 Sass 还是 Less，都需要在开始使用之前了解其语法和功能特性，并掌握相关的工具和技术。

3️⃣ Sass & Less 的区别

1. 语法：Sass 使用缩进式语法，类似于 Python，而 Less 则使用基于花括号的语法，与 CSS 更相似。
2. 变量：Sass 使用 $ 符号来定义变量，而 Less 使用 @ 符号。同时，Sass 的变量支持嵌套和作用域，可以在局部和全局范围内使用；Less 的变量则没有作用域限制，但不能被嵌套。
3. 混合（Mixin）：Sass 的 Mixin 支持参数和默认值，可以直接调用函数。Less 的 Mixin 则没有参数和默认值，必须在样式规则中显式传递参数。
4. 继承（Inheritance）：Sass 支持通过 @extend 关键字实现样式继承，而 Less 不支持，需要通过 Mixin 或类似的方式实现。
5. 运算符：Sass 支持简单的算术运算和颜色运算，可以对数值和颜色进行加、减、乘、除等运算；而 Less 支持更多的运算，例如字符串操作和逻辑运算。
6. 嵌套：Sass 支持嵌套样式规则，可以使代码结构更加清晰和易读；而 Less 的嵌套功能则更为有限，只能嵌套选择器和属性。
7. 浏览器支持：Sass 和 Less 都可以在浏览器端直接编译和使用，但是 Sass 对于某些浏览器的支持可能会受限制。同时，Sass 的 Compass 框架提供了一些额外功能，例如 CSS3 动画和跨浏览器兼容性等。

4️⃣ 一个例子

早期刚接触 tailwindcss 的时候看到其中有这样的写法

• bg-blue-500
• bg-blue-400
• bg-blue-300
• ...

这种代码当然不能一个一个手搓，因为那实在太 baka 了🤣

Sass

@mixin mt($value) {
  .mt-#{$value} {
    margin-top: $value + px;
  }
}

@include mt(50); // .mt-50
@include mt(40); // .mt-40
@include mt(30); // .mt-30

Less

.mt(@value) {
  .mt-@{value} {
    margin-top: @value + px;
  }
}

.mt(50); // .mt-50
.mt(40); // .mt-40
.mt(30); // .mt-30

5️⃣ Another

另外，我觉得这样写也有一点繁琐，使用前需要进行调用，有时间再去找找其它的方案 🫠