📅 最后修改于: 2020-12-25 03:51:26 🧑 作者: Mango
Sass输出样式用于为文档结构指定CSS样式。我们知道，Sass文件会自动创建一个默认的CSS样式，以反映文档的结构。默认的CSS样式并不适合所有情况。
Sass支持许多其他输出样式：
嵌套输出样式是Sass的默认输出样式。当我们处理大型CSS文件时，这种样式非常有用。它使文件的结构更具可读性，并且易于理解。
让我们来看一个嵌套的SCSS文件的简单示例：
#first {
background-color: #00FFFF;
color: #C0C0C0; }
#first p {
width: 10em; }
.highlight {
text-decoration: underline;
font-size: 5em;
background-color: #FFFF00; }
与嵌套CSS样式相比，扩展的输出样式CSS占用更多空间。扩展CSS样式的每个属性都有其自己的行。规则部分包含规则中所有预期使用的属性，因为规则不遵循任何缩进。
让我们以扩展SCSS文件的简单示例为例：
#first {
background-color: #00FFFF;
color: #C0C0C0;
}
#first p {
width: 10em;
}
.highlight {
text-decoration: underline;
font-size: 5em;
background-color: #FFFF00;
}
紧凑的CSS样式比扩展和嵌套的输出样式占用更少的空间。它的主要重点是选择器，而不是其属性。它在同一行中包含选择器及其属性。嵌套规则彼此相邻，没有换行符，而单独的规则组之间将有换行符。
让我们来看一个紧凑的SCSS文件的简单示例：
#first { background-color: #00FFFF; color: #C0C0C0; }
#first p { width: 10em; }
.highlight { text-decoration: underline; font-size: 5em; background-color: #FFFF00; }
与上面讨论的所有其他输出样式相比，压缩的CSS输出样式占用的空间最少。它仅在文件末尾提供空格以分隔选择符和换行符。这种样式方式令人迷惑并且不容易阅读。
让我们来看一个压缩的SCSS文件的简单示例：
#first{background-color:#00FFFF;color:#C0C0C0}
#first p{width:10em}.highlight{text-decoration:underline;font-size:5em;background-color:#FFFF00}