> For the complete documentation index, see [llms.txt](https://jimjim.gitbook.io/sass/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jimjim.gitbook.io/sass/chapter1/s.md).

# Sass和Scss區別

[Sass（Syntactically Awesome StyleSheets）](http://sass-lang.com/)是一種 CSS 的擴充，是為 CSS 的超集合（透過編譯會 compiled 成傳統 CSS，讓瀏覽器可以閱讀）。使用 Sass 的出現是為了解決在大型專案時傳統 CSS 會遇到的重複、可維護性差等問題（新增了 nested rules, variables, mixins, selector inheritance 等特性）。讓開發者可以撰寫簡潔、富語意（expressive）、重複性佳（reusable）、可維護性佳和可延展性佳的 CSS 程式碼。\
gem install sass

Sass 的語法分為新的 SCSS (`Sassy CSS`、`Sass 3`，檔案名稱為`*.scss`) 和舊的 SASS（向`Haml`取經，具備不使用大括弧格式、使用縮排，不能直接使用 CSS 語法、學習曲線較高等特性，檔案名稱為`*.sass`）。由於新的 SCSS 語法是 CSS3 的超集合，所以傳統的 CSS3 檔案就算直接複製過來也不會出錯，學習曲線相對較緩，因此建議使用 SCSS 語法。

文件擴展名不同，Sass 是以“.sass”後綴為擴展名，而 SCSS 是以“.scss”後綴為擴展名

語法書寫方式不同，Sass 是以嚴格的縮進式語法規則來書寫，不帶大括號({})和分號(;)，而 SCSS 的語法書寫和我們的 CSS 語法書寫方式非常類似

關於兩者比較的補充可以參考這篇文章[What’s the difference between SCSS and Sass?](https://stackoverflow.com/questions/5654447/whats-the-difference-between-scss-and-sass)

**兩種語法排列方式比較:**![](https://2396662457-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LlX7mJ4cxCl8pMfjLFQ%2F-LlX7o7G0jAxtu25nekE%2F-LlX7pGexNbAY8vQQRq6%2Fsass-4.jpg?generation=1565014591597043\&alt=media)Scss 註解需要前後都要加/\* \*/，單行也需每一行都加//

Sass 註解多行則只需要再開頭加 /\* ，單行也只是在開頭加//即可

Sass 不需要大刮號，結束也不用分號。