Sass - 输出样式

本章我们将学习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-decoration:underline;font-size:5em;background-color:#FFFF00 
}