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;}

:compact

紧凑型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 }