Vue 中简述一下 Sass、Less，且说明区别？

Sass（Syntactically Awesome Style Sheets）和 Less 是两种流行的 CSS 预处理器，它们为 CSS 添加了一些强大的功能，使得样式表更易于维护和编写。

Sass：

• 特点：
  • 使用缩进来表示层级关系，比较严格。
  • 支持变量、嵌套规则、混合（Mixin）、继承等功能。
  • 有两种语法格式：Sass 格式（缩进）和 SCSS 格式（类似于 CSS，使用大括号和分号）。

// Sass 格式
primary-color: #333;

body
  font-size: 16px
  color:primary-color

Less：

• 特点：
  • 语法类似于 CSS，比较宽松。
  • 也支持变量、嵌套规则、混合（Mixin）、继承等功能，与 Sass 相似。

// Less 格式
@primary-color: #333;

body {
  font-size: 16px;
  color: @primary-color;
}

区别：

1. 语法风格： Sass 的语法比较严格，使用严格的缩进表示层级；Less 的语法比较宽松，类似于 CSS。
2. 文件后缀： Sass 通常使用 .sass 或 .scss 作为文件后缀；Less 使用 .less 作为文件后缀。
3. 变量： 在 Sass 中，变量定义时使用 $ 符号；在 Less 中，变量定义时使用 @ 符号。

总体来说，Sass 和 Less 在功能和语法上都有相似的地方，都提供了便于编写和维护 CSS 的特性。选择其中之一通常是取决于个人或团队的偏好，或者是与现有项目的兼容性。