SASS和SCSS之間的區別是什麼？-css教學-PHP中文網

首頁

web前端

css教學

SASS和SCSS之間的區別是什麼？

William Shakespeare

Feb 16, 2025 am 09:08 AM

Sass 和 SCSS：選擇哪個預處理器？

What's the Difference Between Sass and SCSS?

核心要點

Sass 和 SCSS 都是編譯成 CSS 的預處理器腳本語言，但語法不同。 Sass 使用縮進語法，而 SCSS 使用類似 CSS 的語法。這意味著 Sass 不需要分號或括號，而 SCSS 使用括號表示代碼塊，並使用分號分隔塊內的行。
Sass 和 SCSS 的選擇取決於個人喜好和項目需求。但是，由於 SCSS 的語法類似，因此對於初學者或已經熟悉 CSS 的人來說，SCSS 可能更容易上手。它也與現有的工具、插件和演示更兼容，這使得它成為許多開發人員更方便的選擇。
Sass 和 SCSS 都提供普通 CSS 中沒有的高級功能，例如變量、嵌套、mixin 和繼承，這些功能可以提高 CSS 的可讀性、可維護性和編寫效率。但是，使用兩者都需要編譯步驟，這可能會增加構建過程的複雜性。

What's the Difference Between Sass and SCSS?

本文是 2014 年 4 月 28 日發布文章的更新版本

我寫了很多關於 Sass 的文章，但我收到的一些評論清楚地表明，並非每個人都確切地知道 Sass 指的是什麼。這裡有一些澄清：當我們談論 Sass 時，我們通常指的是預處理器和整個語言。例如，我們會說“我們正在使用 Sass”，或者“這是一個 Sass mixin”。同時，Sass（預處理器）允許兩種不同的語法：

Sass，也稱為 縮進語法
SCSS，一種類似 CSS 的語法

Sass 的歷史

最初，Sass 是另一個名為 Haml 的預處理器的組成部分，由 Ruby 開發人員設計和編寫。因此，Sass 樣式表使用類似 Ruby 的語法，沒有大括號，沒有分號，並且有嚴格的縮進，如下所示：

<code>// 变量
!primary-color= hotpink

// Mixin
=border-radius(!radius)
-webkit-border-radius= !radius
-moz-border-radius= !radius
border-radius= !radius

.my-element
color= !primary-color
width= 100%
overflow= hidden

.my-other-element
+border-radius(5px)</code>

正如您所看到的，這與常規 CSS 相比有很大不同！即使您是 Sass（預處理器）用戶，您也可以看到這與我們習慣的有所不同。變量符號是 ! 而不是 $，賦值符號是 = 而不是 :。非常奇怪。但這就是 Sass 在 2010 年 5 月發布 3.0 版本之前的樣子，該版本引入了一種全新的名為 SCSS 的語法，用於 Sassy CSS。這種語法旨在通過引入一種用戶友好的 CSS 語法來縮小 Sass 和 CSS 之間的差距。

<code>// 变量
$primary-color: hotpink;

// Mixin
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}

.my-element {
color: $primary-color;
width: 100%;
overflow: hidden;
}

.my-other-element {
@include border-radius(5px);
}</code>

SCSS 比 Sass 更接近 CSS。也就是說，Sass 維護者也努力使這兩種語法彼此更接近，方法是從縮進語法中移動 !（變量符號）和 =（賦值符號）到 SCSS 中的 $ 和 :。現在，在啟動新項目時，您可能想知道應該使用哪種語法。讓我闡明路徑並解釋每種語法的優缺點。

Sass 縮進語法的優點

雖然這種語法可能看起來很奇怪，但它有一些有趣的點。首先，它更短，更容易輸入。不再需要大括號和分號，您不需要所有這些東西。更好！不需要 @mixin 或 @include，當單個字符就足夠時：= 和。此外，Sass 語法通過依賴縮進強制執行乾淨的編碼標準。因為錯誤的縮進很可能會破壞整個 .sass 樣式表，所以它確保代碼始終乾淨且格式良好。只有一種編寫 Sass 代碼的方法：好方法。但要注意！縮進在 Sass 中 意味著某些東西。縮進選擇器時，這意味著它嵌套在之前的選擇器中。例如：

<code>// 变量
!primary-color= hotpink

// Mixin
=border-radius(!radius)
-webkit-border-radius= !radius
-moz-border-radius= !radius
border-radius= !radius

.my-element
color= !primary-color
width= 100%
overflow= hidden

.my-other-element
+border-radius(5px)</code>

……將輸出以下 CSS：

<code>// 变量
$primary-color: hotpink;

// Mixin
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}

.my-element {
color: $primary-color;
width: 100%;
overflow: hidden;
}

.my-other-element {
@include border-radius(5px);
}</code>

將 .element-b 向右推一個級別這一簡單事實意味著它是 .element-a 的子級，從而改變了生成的 CSS。請 非常小心 您的縮進！順便說一句，我覺得基於縮進的語法可能更適合 Ruby/Python 團隊而不是 PHP/Java 團隊（儘管這是可以爭論的，我很樂意聽到相反的意見）。

SCSS 語法的優點

對於入門者來說，它完全符合 CSS 標準。這意味著您可以將 CSS 文件重命名為 .scss，它就會 正常工作。自從 SCSS 發布以來，使 SCSS 完全兼容 CSS 一直是 Sass 維護者的首要任務，在我看來，這是一件大事。此外，他們試圖盡可能地堅持未來可能成為有效 CSS 語法的語法（因此是 @指令）。因為 SCSS 與 CSS 兼容，這意味著幾乎沒有學習曲線。語法已經知道：畢竟，它只是帶有少量額外內容的 CSS。這在與經驗不足的開發人員合作時很重要：他們將能夠在不知道 Sass 的任何知識的情況下快速開始編碼。此外，它更容易閱讀，因為它實際上是有意義的。當您閱讀 @mixin 時，您知道它是一個 mixin 聲明；當您看到 @include 時，您正在調用一個 mixin。它沒有使用任何快捷方式，並且所有內容在大聲朗讀時都有意義。此外，大多數現有的 Sass 工具、插件和演示都是使用 SCSS 語法開發的。隨著時間的推移，這種語法正變得越來越重要，並且成為默認選擇，主要是因為上述原因。

最終想法

選擇權取決於您，但除非您有充分的理由使用縮進語法進行編碼，否則我強烈建議使用 SCSS 而不是 Sass。它不僅更簡單，而且更方便。我曾經自己嘗試過縮進語法並喜歡它。我喜歡它有多短和容易。在我最後時刻改變主意之前，我實際上正打算將整個代碼庫移到工作中的 Sass。我感謝我過去的自我阻止了這一舉動，因為如果我們使用縮進語法，與我們的一些工具一起工作將非常困難。另外，請注意 Sass 從不使用大寫字母，無論您是在談論語言還是語法。同時，SCSS 始終使用大寫字母。需要提醒嗎？ SassnotSASS.com 可以幫到您！

關於 SASS 和 SCSS 的常見問題解答

SASS 和 SCSS 的主要區別是什麼？

SASS（語法上令人驚嘆的樣式表）和 SCSS（Sassy CSS）都是預處理器腳本語言，解釋為級聯樣式表 (CSS)。兩者之間的主要區別在於它們的語法。 SASS 遵循基於縮進的語法，這意味著它不需要分號或括號。另一方面，SCSS 遵循類似於 CSS 的語法，使用括號表示代碼塊，並使用分號分隔塊內的行。