Sass輸出樣式 - tw511教學網

關於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