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-decoratio