Sass - 輸出樣式

本章我們將學習Sass 輸出樣式。Sass 生成的 CSS 檔案包含預設的 CSS 樣式，它反映了文件的結構。預設的 CSS 樣式很好，但可能並不適用於所有情況；另一方面，Sass 支援許多其他樣式。

它支援以下不同的輸出樣式：

:nested

巢狀樣式是 Sass 的預設樣式。這種樣式在處理大型 CSS 檔案時非常有用。它使檔案的結構更易於閱讀和理解。每個屬性佔據一行，每個規則的縮排基於其巢狀深度。

例如，我們可以在 Sass 檔案中巢狀程式碼，如下所示：

#first {
   background-color: #00FFFF;
   color: #C0C0C0; 
}

#first p {
   width: 10em; 
}

.highlight {
   text-decoration: underline;
   font-size: 5em;
   background-color: #FFFF00; 
}

:expanded

在擴充套件型別的 CSS 樣式中，每個屬性和規則都佔據一行。與巢狀 CSS 樣式相比，它佔用更多空間。規則部分包含屬性，所有屬性都在規則內縮排，而規則本身不遵循任何縮排。

例如，我們可以在 Sass 檔案中擴充套件程式碼，如下所示：

#first {
   background-color: #00FFFF;
   color: #C0C0C0;
}

#first p {
   width: 10em;
}

.highlight {
   text-decoration: underline;
   font-size: 5em;
   background-color: #FFFF00;
}

:compact

緊湊型 CSS 樣式比擴充套件型和巢狀型佔用更少的空間。它主要關注選擇器而不是其屬性。每個選擇器佔據一行，其屬性也放置在同一行。巢狀規則彼此相鄰放置，沒有換行符，而不同的規則組之間會有換行符。

例如，我們可以在 Sass 檔案中緊湊程式碼，如下所示：

#first { 
   background-color: #00FFFF; color: #C0C0C0; 
}

#first p { 
   width: 10em; 
}

.highlight { 
   text-decoration: underline; font-size: 5em; background-color: #FFFF00; 
}

:compressed

壓縮型 CSS 樣式與上面討論的所有其他樣式相比，佔用空間最少。它只使用空格分隔選擇器，並在檔案末尾新增換行符。這種樣式令人困惑，不易閱讀。

例如，我們可以在 Sass 檔案中壓縮程式碼，如下所示：

#first { 
   background-color:#00FFFF;color:#C0C0C0
} 

#first p { 
   width:10em 
} 

.highlight { 
   text-decoration:underline;font-size:5em;background-color:#FFFF00 
}