Sass 4种输出样式详细用法

本文概述

• 嵌套输出样式
• 扩展输出样式
• 紧凑的输出样式
• 压缩输出样式

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}