主要差異
雖然人們經常說 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;
}