Sass - 输出样式

---

在本章中，我们将研究SASS 输出样式。SASS生成的CSS文件由默认的CSS样式组成，反映了文档的结构。默认的 CSS 样式很好，但可能并不适合所有情况；另一方面，SASS 支持许多其他样式。

它支持以下不同的输出样式 -

：嵌套

嵌套样式是SASS的默认样式。当您处理大型 CSS 文件时，这种样式设置方式非常有用。它使文件的结构更具可读性并且易于理解。每个属性都有自己的行，每个规则的缩进基于其嵌套深度。

例如，我们可以将代码嵌套在 SASS 文件中，如下所示 -

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

#first p {
   width: 10em; 
}

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

：扩大

在 CSS 样式的扩展类型中，每个属性和规则都有自己的行。与嵌套 CSS 样式相比，它需要更多空间。规则部分由属性组成，这些属性都在规则内，而规则不遵循任何缩进。

例如，我们可以扩展 SASS 文件中的代码，如下所示 -

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

#first p {
   width: 10em;
}

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

：袖珍的

紧凑的 CSS 样式比 Expanded 和 Nested 占用的空间更少。它主要关注选择器而不是其属性。每个选择器占用一行，其属性也放在同一行。嵌套规则彼此相邻放置，没有换行符，单独的规则组之间将有换行符。

例如，我们可以压缩 SASS 文件中的代码，如下所示 -

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

#first p { 
   width: 10em; 
}

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

：压缩

与上面讨论的所有其他样式相比，压缩 CSS 样式占用的空间最少。它仅在文件末尾提供空格来分隔选择器和换行符。这种样式方式令人困惑且不易阅读。

例如，我们可以压缩 SASS 文件中的代码，如下所示 -

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

#first p { 
   width:10em 
} 

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