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

扩展输出样式【Sass 4种输出样式详细用法】与嵌套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文件的简单示例：