Difference Between SASS and SCSS

SASS（Syntactically Awesome Style Sheets）是一種由 Hampton Catlin 設計、Chris Eppstein 和 Natalie Weizenbaum 開發的樣式表語言。它是一種前處理器指令碼語言，將被編譯或解釋為 CSS。 Sass Script 本身就是一種指令碼語言。它的 typing 規則是動態的。

SCSS 通常被稱為 Sassy CSS，它是作為 SASS（Syntactically Awesome Style Sheets）的主要語法引入的，它建立在現有的 CSS 語法之上。它使用分號和括號，如 CSS（級聯樣式表）。 SCSS 是 CSS 的超集，即所有 CSS 功能都將在 SCSS 中可用，並且包含 SASS（Syntactically Awesome Style Sheets）的一些功能。 SCSS 使任何 CSS 術語都有效。

9 大區別：

區別1

SASS是Syntactically Awesome Style Sheets，是CSS的擴充套件，提供巢狀規則、繼承、Mixins等特性，而SCSS是Sassy Cascaded Style Sheets，與CSS類似，填補了CSS與SASS之間的空白和不相容。它是在 MIT 許可下獲得許可的。它首次出現在2006年。

區別2

SASS 更易於使用且語法更簡單，因此無需使用分號、曲線、大括號等，而 SCSS 與 CSS 完全相容，副檔名為 .scss 型別。

區別3

SASS 具有最好的編碼標準和良好的官方文件的特點，而 SCSS 更容易學習開發程式碼。

區別4

SASS 基於 javascript 並支援不同的語言擴充套件，擁有自己的語法、開源 CSS 前處理器和高階功能，例如控制和指令及其庫。

區別5

SASS 更難通過重寫程式碼與現有 CSS 專案整合，而 SCSS 通過取樣新增新程式碼而不是重寫現有程式碼庫更容易與現有程式碼庫整合。

區別6

SASS 更易於使用、閱讀和編寫，而 SCSS 在實現程式碼方面更具邏輯性和複雜性。

區別7

SASS 變數將以美元 ($) 符號開頭，而 SCSS 具有模組化功能，可以通過使用某種註釋以更加模組化的方式組織程式碼。

區別8

SASS 具有高階語法功能，並且其檔案具有 .sass 副檔名，而 SCSS 具有類似每個有效 CSS 檔案都是 SCSS 檔案的功能。

區別9

SASS 與 Ruby 相似，安裝需要使用 Ruby，沒有嚴格的程式碼縮排，而 SCSS 與 CSS 相似，無需任何額外安裝或配置即可輕鬆使用。

區別10

SASS 具有可在 CSS 檔案的不同位置使用的區域性和全域性變數，而 SCSS 具有不同的變數，例如顏色變數，這些變數可以稍後在樣式表中使用。

區別11

SASS 具有巢狀功能，可以將 CSS 選擇器巢狀顯示在 HTML 中，並且難以維護較長的分層巢狀 CSS，而 SCSS 可以處理多個類和不同的巢狀樣式。

區別12

SASS 具有文件樣式，它比 CSS 更好，並且具有顏色、屬性和引數列表的操作功能，而 SCSS 語法具有邊距、列表樣式、填充、顯示等。

區別13

SASS 具有控制指令、功能指令、Mixins 並具有可擴充套件的特性，而 SCSS 可以與 SASS 一起使用來表示 CSS 類似的特性。

區別14

在最初的開發之後，SASS 擴充套件到 SassScript。它支援跨平臺作業系統。它受到CSS、LESS、YAML等的影響。這個SASS的副檔名是.scss和.sass，它的官方實現也是一個使用Ruby開發的開源專案。

結論

SASS 與 SCSS 都是 CSS 前處理器，它們非常有用，可包含在基於 CSS 的 UI（使用者介面）或前端框架中以簡化開發。這些 SASS 與 SCSS 框架在以程式設計方式利用強大的 CSS 功能時在高階別的 CSS 功能方面提供了強大的功能。 SASS 是一種 CSS 擴充套件，其中大部分功能都將被擴充套件，而 SCSS 是 CSS 的一種超集，其中 CSS 的所有功能都將在 SCSS 中。前處理器的選擇取決於通過以有效的方式做出權衡選擇來使應用程式高效工作所需的功能和特性。

與SCSS相比，SASS更易於使用並且需要更少的語法或配置，推薦用於需要更快開發範圍和更容易開發複雜元件的較大應用程式的情況，而SCSS可以用於優化Mixin特性的情況，以及許多其他有效技術。

SASS 和 SCSS 的區別