SASS和SCSS有什麼區別？

---

SASS是CSS的語言擴充套件，可以新增新功能，使編寫樣式表更容易。同時，Compass是一個基於SASS構建的框架，它提供了更多功能並簡化了樣式表的開發。

這意味著每個有效的CSS3樣式表也是有效的SCSS。我們用於scss檔案的副檔名是.scss。SCSS使用行的縮排而不是括號或分號來標識程式碼塊。雖然不再是主要語法，但縮排語法將繼續得到支援。使用縮排語法的檔案使用副檔名.sass。

SASS和SCSS的功能

SASS

SASS是一個輔助工具，使編寫CSS更容易和更高效。它提供了普通CSS中沒有的更多功能。

一些主要功能如下：

• 變數− 我們可以複用儲存的資料，這使得樣式表更容易後期維護，我們還可以複用顏色和字型。

• 巢狀− 巢狀允許我們根據相關的選擇器組織樣式，這使我們更容易閱讀和維護程式碼。

• Mixin− Mixin是SASS的關鍵特性。我們用它來組合許多CSS宣告，使之更簡潔，節省時間和精力，並在專案中重複使用它們。

• 繼承− SASS的一個強大特性是繼承。我們可以定義一組可以被其他選擇器繼承的樣式，從而減少我們要編寫的程式碼量。

• 控制指令− 在SASS中，控制指令和表示式可以在某些條件下包含樣式，例如@if、@else和@for，允許我們在樣式表中建立邏輯。

• @if, @else− 這些指令與javascript中的if和else條件語句相同。它用於執行表示式，而else用於檢查if語句之前執行的表示式。

• @for− 它用於執行許多分組的語句。

SCSS

另一方面，SCSS也是CSS中一個強大的框架。

使用迴圈、變數和數學運算，SCSS幫助我們更簡潔地編寫CSS程式碼，從而使CSS編寫更強大。

SCSS的一些主要功能如下：

• SCSS包含CSS的所有功能以及CSS中沒有的更多功能，這使得SCSS更容易被開發者選擇。

• SCSS鼓勵巢狀規則。

• SCSS程式碼量少，因此我們可以快速編寫。

• SCSS提供巢狀語法和函式，例如數學運算、顏色等等。

• 它更強大、更優雅，因為它是的CSS的擴充套件，使開發人員的工作更輕鬆快捷。

• 它可以管理多個巢狀樣式和類。

• 它允許內聯文件，例如我們可以在程式碼旁邊添加註釋。

SASS和SCSS的區別

現在讓我們看看SASS和SCSS的主要區別：

關鍵特性	SASS	SCSS
語言	SASS是CSS的預處理器，透過新增新功能來擴充套件其功能。	SCSS也是預處理器，但功能不如SASS強大。
特性	SASS透過新增變數、巢狀、Mixin、繼承和控制指令等新功能來擴充套件CSS的功能。	SCSS提供了巢狀語法和類。
語法樣式	Sass使用縮排語法，與Haml相同。	SCSS使用類似CSS的語法，即塊格式。
CSS相容性	在SASS中，CSS不能用作SASS，SASS也不能用作CSS。	在SCSS中，如果程式碼在CSS中有效，它在SCSS程式碼中也自動有效。
社群支援	SASS擁有龐大的社群，包括來自全球的學生、開發者等等。	SCSS的社群較小，主要是一些開發者。
CSS分層巢狀	關於SASS，它支援巢狀功能，可以用來巢狀CSS選擇器以在HTML中顯示它們。否則，維護較大的巢狀CSS會更繁瑣。	在SCSS中，它可以有效地維護多個類和不同型別的巢狀樣式。

語法差異

語法上的主要區別在於SASS在其語法或程式碼中使用其功能。對於SCSS，它使用CSS功能，因為CSS和SCSS的功能相同。

SCSS語法

//SCSS
@mixin cover {
   $color: red;
   @for $i from 1 through 5 {
      &.bg-cover#{$i} { background-color: adjust-hue($color, 15deg * $i) }
   }
}
.wrapper { @include cover }

SASS語法

//SASS
=cover
   $color: red
   @for $i from 1 through 5
      &.bg-cover#{$i}
         background-color: adjust-hue($color, 15deg * $i)
.wrapper
+cover

SASS示例

這裡，我們使用SASS來定義變數和樣式。我們為body元素定義了一些基本樣式，包括背景顏色和字體系列。

接下來，我們將.header選擇器巢狀在body選擇器內，併為.header內的元素定義一些樣式。

使用者可以看到，在輸出中，“&”符號在“&:hover”中將生成.header a:hover的選擇器。

// variables
$base-color: #333;
$font-stack: "Helvetica Neue", sans-serif;
 
// styles
body {
   background-color: $base-color;
   font-family: $font-stack;
} 
//selectors
.header {
   background-color: #fff;
   a {
      color: $base-color;
      text-decoration: none;
      &:hover {
         text-decoration: underline;
      }
   }
}

輸出

body {
   background-color: #333;
   font-family: "Helvetica Neue", sans-serif;
} 
.header {
   background-color: #fff;
} 
.header a {
   color: #333;
   text-decoration: none;
} 
.header a:hover {
   text-decoration: underline;
}

SCSS示例

/* .scss file */
$bgcolor: blue;
$textcolor: red;
$fontsize: 25px; 
/* Use the variables */
body {
   background-color: $bgcolor;
   color: $textcolor;
   font-size: $fontsize;
}

輸出

body
{
   background-color: blue;

      color: red;
   font-size: 25px;
}
/* now this can apply the resulting HTML file */

結論

最後，SASS被替換或重新命名為SCSS，添加了新的樣式表並進行了一些修改，但是我們仍然可以使用舊版本的SASS。如果我們想要縮排，我們可以使用SASS；如果我們想要塊文件，我們可以使用SCSS。