Sass 输出样式

Sass输出样式

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}

SASS 操作

Sass 运算符