Sass、Less 的区别是什么，你知道吗？

1. 编译环境

• Sass 服务端处理的，需要使用编译工具（Dart-Sass 和 Node-Sass）将 Sass 代码编译成 CSS 文件。
• Less 客户端使用 JS 引入 Less 文件，并使用 less.js 将 less 编译成 css 文件。

2. 变量符

Sass 使用 $ 符号，Less 使用 @ 符号。

$primary-color: #f00;

@primary-color: #f00;

3. 条件语法

Sass 支持条件语句，可以使用 if {} else {},for{} 循环等等。举个列子，在 Sass 中，我们可以定义一个条件语句：

$condition: true;
@if $condition {
    // do something...
} @else {
    // do something else...
}

Less 支持使用 JS 表达式来实现类似的效果。

@condition: true;
.some-class {
    color: ~`@{condition} ? '#f00' : '#0f0'`; // 使用 JavaScript 表达式
}

4. 代码风格

Sass 使用 & 符号来表示父元素选择器

.parent {
  color: blue;

  &:hover {
    color: red;
  }

  .child {
    font-weight: bold;
  }
}

Less使用 & 符号也可以用来表示父元素选择器，也但是可以使用 @ 符号来表示父元素选择器的变量

.parent {
  color: blue;

  &:hover {
    color: red;
  }

  @selector: ~"&"; // 表示将 & 符号赋值给 @selector 变量
  @{selector} .child { // 在选择器中使用变量，需要使用@{}语法将变量包裹起来。
    font-weight: bold;
  }
}

在Sass中，Mixin使用 @mixin 声明，而在Less中，Mixin使用 .mixin 声明。

@mixin button-styles {
  border: none;
  padding: 10px 20px;
  font-size: 1rem;
}

.button-styles() {
  border: none;
  padding: 10px 20px;
  font-size: 1rem;
}

5. 继承方式

Sass使用“@extend”语句实现继承，而Less使用“:extend()”方法实现继承。

.parent {
    color: #f00;
}
.child {
    @extend .parent; // 使用 @extend 语句实现继承
    font-size: 16px;
}

.parent {
    color: #f00;
}
.child {
    &:extend(.parent); // 使用 :extend() 方法实现继承
    font-size: 16px;
}

总结

Sass和Less都是非常有用的CSS预处理器，它们可以提高CSS代码的可读性和可维护性。它们之间的区别在于编译环境、变量符、条件语句、代码风格和继承方式等方面。我们可以根据自己的需求选择适合自己的预处理器。