四种编译输出格式

约 688 字大约 2 分钟

2025-04-09

Sass 支持多种 CSS 输出格式，通过编译选项控制生成的 CSS 代码风格，适用于不同场景（如开发调试、生产环境）。以下是所有输出格式的详细说明及示例：

一、输出格式类型

Sass 提供 4 种标准输出格式：

格式名称	特点	适用场景
`nested`	默认格式，嵌套缩进（反映 Sass 结构）	开发环境（可读性较高）
`expanded`	完全展开，类似手写 CSS	开发环境（结构清晰）
`compact`	每个选择器的规则占一行	折中方案（适度简洁）
`compressed`	压缩格式，无空格和换行	生产环境（最小化体积）

二、格式对比示例

1、原始 Sass 代码

.container {
  padding: 20px;
  .item {
    color: red;
    &:hover {
      color: blue;
    }
  }
}

2、`nested` 格式（默认）

特点：嵌套结构通过缩进体现，右花括号不换行。

.container {
  padding: 20px; }
  .container .item {
    color: red; }
    .container .item:hover {
      color: blue; }

3、`expanded` 格式

特点：完全展开，类似手写 CSS 的格式。

.container {
  padding: 20px;
}
.container .item {
  color: red;
}
.container .item:hover {
  color: blue;
}

4、`compact` 格式

特点：每个选择器及其规则占一行。

.container { padding: 20px; }
.container .item { color: red; }
.container .item:hover { color: blue; }

5、`compressed` 格式

特点：无缩进、无换行，体积最小化。

.container{padding:20px}.container .item{color:red}.container .item:hover{color:blue}

三、如何设置输出格式

1、命令行工具

通过 --style 参数指定格式：

sass input.scss output.css --style=compressed

2、Node.js（Dart Sass）

使用 sass.render 或 sass.compile 时配置 style 选项：

const sass = require("sass");

const result = sass.compile("input.scss", {
  style: sass.OutputStyle.expanded,
});

3、Webpack（sass-loader）

在 webpack.config.js 中配置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          "css-loader",
          {
            loader: "sass-loader",
            options: {
              sassOptions: {
                outputStyle: "compressed",
              },
            },
          },
        ],
      },
    ],
  },
};

4、Gulp

在 gulpfile.js 中配置：

const gulp = require("gulp");
const sass = require("gulp-sass")(require("sass"));

gulp.task("sass", () => {
  return gulp
    .src("src/*.scss")
    .pipe(sass({ outputStyle: "expanded" }).on("error", sass.logError))
    .pipe(gulp.dest("dist"));
});