主要差异

虽然人们经常说 Sass 作为这个 CSS 预处理器的名称,但它们通常意味着 SCSS 语法。Sass 使用 .sass 文件扩展名,而 SCSS-Sass 使用 .scss 扩展名。它们都被称为 Sass

一般来说,SCSS 语法更常用。SCSS 看起来像具有更多功能的常规 CSS,而 Sass 看起来与常规 CSS 完全不同。两种语法都具有相同的能力。

句法

主要区别在于 Sass 不使用大括号或分号,SCSS 的大小写。Sass 也是对空格敏感的,这意味着你必须正确地缩进。在 SCSS 中,你可以根据需要格式化和缩进规则。

SCSS:

// nesting in SCSS
.parent {
  margin-top: 1rem;

  .child {
    float: left;
    background: blue;
  }
}

上海社会科学院:

// nesting in Sass
.parent
  margin-top: 1rem

  .child
    float: left
    background: blue

编译完成后,两者都会生成相同的 CSS:

.parent {
  margin-top: 1rem;
}
.parent .child {
  float: left;
  background: blue;
}