Sass 輸出樣式

在本章中，我們將研究 SASS輸出樣式。SASS生成的CSS文件由反映文檔結(jié)構(gòu)的默認(rèn)CSS樣式組成。默認(rèn)的CSS樣式是好的，但可能不適合所有情況，另一方面SASS支持許多其他樣式。

它支持以下不同的輸出樣式:

:nested

嵌套樣式是SASS的默認(rèn)樣式。這種方式的樣式是非常有用的，當(dāng)你處理大型CSS文件。它使得文件的結(jié)構(gòu)更可讀，并且可以容易地理解。每個屬性都有自己的行，每個規(guī)則的縮進(jìn)都是基于嵌套的深度。

例如，我們可以在SASS文件中嵌套代碼，如下所示:

#first {
  background-color: #00FFFF;
  color: #C0C0C0; }
  #first p {
    width: 10em; }

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

:expanded

在展開類型的CSS樣式中，每個屬性和規(guī)則都有自己的線。與嵌套CSS樣式相比，它需要更多的空間。規(guī)則部分由屬于規(guī)則中的所有屬性組成，其中規(guī)則不遵循任何縮進(jìn)。

例如，我們可以擴展SASS文件中的代碼，如下所示:

#first {
  background-color: #00FFFF;
  color: #C0C0C0;
}
#first p {
  width: 10em;
}

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

:compact

緊湊的CSS風(fēng)格競爭力比Expanded和Nested占用更少的空間。它主要關(guān)注選擇器而不是其屬性。每個選擇器占用一行，其屬性也放在同一行。嵌套規(guī)則彼此相鄰，沒有換行符，并且獨立的規(guī)則組之間將有換行符。

例如，我們可以壓縮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}