Sass 和 SCSS 有什麼區別？

Sass與Scss不同點

SCSS是 Sass 3 引入新的語法，其語法完全兼容 CSS3，並且繼承了 Sass 的強大功能。
Sass 和 SCSS 其實是同一種東西，我們平時都稱之爲 Sass，兩者之間不同之處有以下兩點

• 文件擴展名不同，Sass 是以“.sass”後綴爲擴展名，而 SCSS 是以“.scss”後綴爲擴展名
• 語法書寫方式不同，Sass是以嚴格的縮進式語法規則來書寫，不帶大括號和分號，而SCSS 的語法書寫和我們的CSS 語法書寫方式非常類似。

Sass語法

$font-stack: Helvetica, sans-serif  //定義變量
$primary-color: #333 //定義變量

body
  font: 100% $font-stack
  color: $primary-color

Scss語法

$font-stark Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

兩個編輯出來的css都一樣

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

SCSS 是 CSS 的擴展，因此，所有在 CSS 中正常工作的代碼也能在 SCSS 中正常工作。
也就是說，對於一個 Sass 用戶，只需要理解 Sass 擴展部分如何工作的，就能完全理解 SCSS。大部分擴展，例如變量、parent references 和 指令都是一致的。

---

謝謝你閱讀到了最後
期待你,點贊、評論、交流