原文

Difference Between SASS and SCSS

SASS（Syntactically Awesome Style Sheets）是一種由 Hampton Catlin 設(shè)計(jì)、Chris Eppstein 和 Natalie Weizenbaum 開發(fā)的樣式表語(yǔ)言。 它是一種預(yù)處理器腳本語(yǔ)言，將被編譯或解釋為 CSS。 Sass Script 本身就是一種腳本語(yǔ)言。 它的 typing 規(guī)則是動(dòng)態(tài)的。

SCSS 通常被稱為 Sassy CSS，它是作為 SASS（Syntactically Awesome Style Sheets）的主要語(yǔ)法引入的，它建立在現(xiàn)有的 CSS 語(yǔ)法之上。 它使用分號(hào)和括號(hào)，如 CSS（級(jí)聯(lián)樣式表）。 SCSS 是 CSS 的超集，即所有 CSS 功能都將在 SCSS 中可用，并且包含 SASS（Syntactically Awesome Style Sheets）的一些功能。 SCSS 使任何 CSS 術(shù)語(yǔ)都有效。

9 大區(qū)別：

區(qū)別1

SASS是Syntactically Awesome Style Sheets，是CSS的擴(kuò)展，提供嵌套規(guī)則、繼承、Mixins等特性，而SCSS是Sassy Cascaded Style Sheets，與CSS類似，填補(bǔ)了CSS與SASS之間的空白和不兼容。 它是在 MIT 許可下獲得許可的。它首次出現(xiàn)在2006年。

區(qū)別2

SASS 更易于使用且語(yǔ)法更簡(jiǎn)單，因此無(wú)需使用分號(hào)、曲線、大括號(hào)等，而 SCSS 與 CSS 完全兼容，文件擴(kuò)展名為 .scss 類型。

區(qū)別3

SASS 具有最好的編碼標(biāo)準(zhǔn)和良好的官方文檔的特點(diǎn)，而 SCSS 更容易學(xué)習(xí)開發(fā)代碼。

區(qū)別4

SASS 基于 javascript 并支持不同的語(yǔ)言擴(kuò)展，擁有自己的語(yǔ)法、開源 CSS 預(yù)處理器和高級(jí)功能，例如控制和指令及其庫(kù)。

區(qū)別5

SASS 更難通過(guò)重寫代碼與現(xiàn)有 CSS 項(xiàng)目集成，而 SCSS 通過(guò)采樣添加新代碼而不是重寫現(xiàn)有代碼庫(kù)更容易與現(xiàn)有代碼庫(kù)集成。

區(qū)別6

SASS 更易于使用、閱讀和編寫，而 SCSS 在實(shí)現(xiàn)代碼方面更具邏輯性和復(fù)雜性。

區(qū)別7

SASS 變量將以美元 ($) 符號(hào)開頭，而 SCSS 具有模塊化功能，可以通過(guò)使用某種注釋以更加模塊化的方式組織代碼。

區(qū)別8

SASS 具有高級(jí)語(yǔ)法功能，并且其文件具有 .sass 擴(kuò)展名，而 SCSS 具有類似每個(gè)有效 CSS 文件都是 SCSS 文件的功能。

區(qū)別9

SASS 與 Ruby 相似，安裝需要使用 Ruby，沒(méi)有嚴(yán)格的代碼縮進(jìn)，而 SCSS 與 CSS 相似，無(wú)需任何額外安裝或配置即可輕松使用。

區(qū)別10

SASS 具有可在 CSS 文件的不同位置使用的局部和全局變量，而 SCSS 具有不同的變量，例如顏色變量，這些變量可以稍后在樣式表中使用。

區(qū)別11

SASS 具有嵌套功能，可以將 CSS 選擇器嵌套顯示在 HTML 中，并且難以維護(hù)較長(zhǎng)的分層嵌套 CSS，而 SCSS 可以處理多個(gè)類和不同的嵌套樣式。

區(qū)別12

SASS 具有文檔樣式，它比 CSS 更好，并且具有顏色、屬性和參數(shù)列表的操作功能，而 SCSS 語(yǔ)法具有邊距、列表樣式、填充、顯示等。

區(qū)別13

SASS 具有控制指令、功能指令、Mixins 并具有可擴(kuò)展的特性，而 SCSS 可以與 SASS 一起使用來(lái)表示 CSS 類似的特性。

區(qū)別14

在最初的開發(fā)之后，SASS 擴(kuò)展到 SassScript。 它支持跨平臺(tái)操作系統(tǒng)。 它受到CSS、LESS、YAML等的影響。這個(gè)SASS的文件擴(kuò)展名是.scss和.sass，它的官方實(shí)現(xiàn)也是一個(gè)使用Ruby開發(fā)的開源項(xiàng)目。

結(jié)論

SASS 與 SCSS 都是 CSS 預(yù)處理器，它們非常有用，可包含在基于 CSS 的 UI（用戶界面）或前端框架中以簡(jiǎn)化開發(fā)。 這些 SASS 與 SCSS 框架在以編程方式利用強(qiáng)大的 CSS 功能時(shí)在高級(jí)別的 CSS 功能方面提供了強(qiáng)大的功能。 SASS 是一種 CSS 擴(kuò)展，其中大部分功能都將被擴(kuò)展，而 SCSS 是 CSS 的一種超集，其中 CSS 的所有功能都將在 SCSS 中。 預(yù)處理器的選擇取決于通過(guò)以有效的方式做出權(quán)衡選擇來(lái)使應(yīng)用程序高效工作所需的功能和特性。

與SCSS相比，SASS更易于使用并且需要更少的語(yǔ)法或配置，推薦用于需要更快開發(fā)范圍和更容易開發(fā)復(fù)雜組件的較大應(yīng)用程序的情況，而SCSS可以用于優(yōu)化Mixin特性的情況，以及許多其他有效技術(shù)。

總結(jié)

以上是生活随笔為你收集整理的SASS 和 SCSS 的区别的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。