Sass - 输出风格

Sass - 输出风格

当 Sass 将你的 .scss 或 .sass 文件编译成 CSS 时，它可以以不同的方式格式化输出。选择合适的输出风格取决于你是在开发还是部署你的应用程序。

Sass（特别是主要的实现 Dart Sass）支持以下主要的输出风格，通常通过命令行标志（--style）或构建工具选项进行配置：

expanded

这是默认风格。它将每个选择器和声明写在自己的行上，非常类似于大多数开发者手动编写 CSS 的方式。它包含了反映 Sass 嵌套的缩进，使其在开发过程中易于阅读和调试。

SCSS 输入示例:

.card {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;

  h2 {
    color: #343a40;
  }
}

编译输出（--style expanded）:

.card {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
}
.card h2 {
  color: #343a40;
}

compressed

这种风格会尽可能移除空白和不必要的字符（如注释和末尾的分号），从而产生最小的文件大小。它将整个 CSS 输出放在一行上，除非 CSS 语法必需换行（例如在 @media 块内）。这种风格非常适合生产环境，以最大限度地减少带宽使用。

SCSS 输入示例（同上）：

.card{background-color:#f8f9fa;border:1px solid #dee2e6}.card h2{color:#343a40}

其他历史风格（不太常见）

较早版本的 Sass（如 Ruby Sass）支持额外的风格，如 :nested 和 :compact。虽然 Dart Sass 可能以编程方式支持它们，但它们通常不作为命令行选项提供，在现代工作流程中也不太相关。

• Nested: 类似于 expanded，但缩进直接匹配 Sass 源代码中的嵌套级别。可能有一定用处，但 expanded 通常因其可读性而更受欢迎。
• Compact: 试图将每个 CSS 规则放在一行上，结合选择器和属性。旨在平衡可读性和文件大小，但并未被广泛采用。

建议

在开发期间使用 expanded 风格，以提高可读性并方便调试（特别是配合源映射）。

对于生产构建，使用 compressed 风格以优化加载性能。

你可以使用 Sass CLI 的 --style 标志控制输出风格：

# 开发环境
sass --watch input.scss:output.css --style=expanded

# 生产构建
sass input.scss:output.css --style=compressed --no-source-map

注意：生产构建时常使用 --no-source-map 以避免生成 map 文件，尽管有些人为了便于生产环境调试而选择生成它们。