主要差異

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