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样式的扩展类型中,每个属性和规则都有其自己的行。与Nested 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 
}

作者:terry,如若转载,请注明出处:https://www.web176.com/sass/1671.html

(0)
打赏 支付宝 支付宝 微信 微信
terryterry
上一篇 2021年1月26日 下午5:44
下一篇 2021年1月26日 下午5:50

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注