💫 Sass & Less

    312

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

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

消息盒子
# 您需要首次评论以获取消息 #
# 您需要首次评论以获取消息 #

只显示最新10条未读和已读信息