嵌套的風(fēng)格是SASS的默認(rèn)樣式。這樣的造型是非常有用的，當(dāng)你處理大量CSS文件。它使該文件的結(jié)構(gòu)更具有可讀性和可容易地理解的。每個(gè)屬性采用自己的行，每條規(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樣式的擴(kuò)展類型每個(gè)屬性和規(guī)則都有其自己的行。相對(duì)于嵌套的CSS樣式它需要更多的空間。規(guī)則部分包括其全部意圖的規(guī)則，其中的規(guī)則，不遵循任何縮進(jìn)內(nèi)屬性。

例如，我們可以擴(kuò)大SASS文件中的代碼，如下所示：

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

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

:compact

緊湊型CSS樣式競爭不到擴(kuò)展和嵌套空間。它主要側(cè)重于選擇器，而不是它的屬性。每個(gè)選擇器占用一行以及它的屬性也放置在同一行中。嵌套的規(guī)則被定位彼此相鄰，而不換行和規(guī)則的獨(dú)立組將具有在它們之間的換行。

例如，我們可以壓縮SASS文件中的代碼，如下所示：

#first { background-color: #00FFFF; color: #C0C0C0; }
#first p { width: 10em; }
.highlight { text-decoration: underline; font-size: 5em; background-color: #FFFF00; }

:compressed

壓縮CSS樣式至少需要空間比以上討論所有其他樣式數(shù)量少。它提供空格只單獨(dú)選擇器和換行符在文件的結(jié)尾。這樣的造型是混亂，不容易閱讀。

例如，我們可以壓縮SASS文件中的代碼，如下所示：

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

上一篇：Sass @if指令下一篇：Sass @規(guī)則和指令

在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

Sass輸出樣式

:nested

:expanded

:compact

:compressed