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 
}