在 Sass 中有 4 种格式，它们分别是嵌套格式、展开格式、紧凑格式和压缩格式；本节我们将讲解这四种格式的区别以及设置他们的。

不同的编码语言都有不同的格式，比如缩进、换行、空格等等，Sass 格式指的就是转换为 CSS 的格式。

嵌套格式是 Sass 中的认格式，这种格式选择器和都会独占一行，能更好的反应出 HTML 元素和样式的关系，同时缩进也会与 Sass 中的缩进保持一致，一般来说这种格式使得我们的样式结构更清晰、更易读。我们举例看下这种格式：

.@R_451_2@ {
	width: px; }
.@R_451_2@2 {
	width: px;
	height: px;  }
	.@R_451_2@2 p {
		color: red; }

展开格式就像我们平时手写 CSS 的格式一样，、选择器都会独占一行，会缩进，选择器不会缩进而是顶头的，前面章节中我们演示的例子转为的 CSS 就都是展开格式的，我们举个例子看下这种格式：

.@R_451_2@ {
  width: px;
}
.@R_451_2@2 {
  width: px;
  height: px;
}
.@R_451_2@2 p {
  color: red;
}
.@R_451_2@2 .main {
  width: ;
  heigth: auto;
}

从上面的就可以看出来，这种格式的缩进、换行等其实和我们平时项目中写的 CSS 的格式是一样的。

看名字就知道，这种格式占用的空间肯定是小的，每个选择器和其 CSS 样式只占用一行，而且嵌套的选择器之间没用空行，只有不嵌套的选择器之间才会有空行，空行的意思其实就是分隔符，我们举例看下这种格式：

.@R_451_2@ { width: px; }

.@R_451_2@2 { width: px; height: px; }
.@R_451_2@2 p { color: red; }
.@R_451_2@2 .main { width: ;heigth: auto; }

从上面可以看出这种格式转换的 CSS 的更为紧凑，占据的空间更小，不过当多了后读起来可能不是很方便。

通过字面意思看，这种格式是将的 CSS 直接压缩，所有无意义的空行、换行、空格以及注释，从而将的体积尽量压缩至最小，在压缩的同时会对的进行一些调整将体积压缩至更小，我们举个例子看下压缩后的 CSS ：

.@R_451_2@{width:px;}.@R_451_2@2{width:px;height:px;}.@R_451_2@2 p{color:red;}.@R_451_2@2 .main{width:;heigth:auto;}

上面这种压缩后的我们基本是没法看和更改的，所以这种格式一般用于生产环境，也就是上线的时候会调整为这种格式来。

上面我们讲了 4 中格式，接下来我们讲解如何在 Sass 中设置不同的格式，我们可以通过在命令行中编写如下的命令来设置不同的格式：

// 设置为嵌套格式
$ sass --style=nested style.scss a.scss
// 设置为展开格式
$ sass --style=expanded style.scss a.scss
// 设置为紧凑格式
$ sass --style=compact style.scss a.scss
// 设置为压缩格式
$ sass --style=compressed style.scss a.scss

上面是在命令行设置格式，但我们一般都是在前端项目里使用 Sass 的，很少直接在命令行使用，那该怎么设置呢？我们一般都会安装 node-sass 这个依赖包，node-sass 的设置选项中有 outputStyle 可以用于设置格式，示例如下：

var sass = require('node-sass');
sass.render({
  file: '/path/to/myFile.scss',
  includePaths: [ 'lib/', 'mod/' ],
  // 设置格式
  outputStyle: 'compressed'
}, function(error, result) {
    console.log(error.status);
  }
});

在前端的项目中我们一般会使用 webpack 作为构建工具，所以我们可以在 中来设置 sass 的格式，示例如下：

// webpack.con.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          'style-loader',
          'loader',
          {
            loader: '',
            options: {
              sourceMap: true,
              sassOptions: {
                outputStyle: 'compressed'
              },
            },
          },
        ],
      },
    ],
  },
};

目前大多数的前端项目使用 Sass 的话都会使用 这个依赖包，所以我们可以在 的配置项中根据不同的环境来作区分，来动态的设置格式。

本节我们讲解了 Sass 的格式，这是为了让你对 Sass 有更全面的了解，这个在项目中并不是很常用，而且在前端项目中格式的设置一般为一次性的工作，基本都是由整个项目的前端负责人或架构师来完成。

不过你还是要了解这四种格式：嵌套格式、展开格式、紧凑格式和压缩格式之区别。尤其是压缩格式，它基本都是在线上环境（生产环境）中使用的，因为我们线上的样式体积是越小越好，越有利于体验！最后请你根据下面这张图来回忆一下本节讲的四种格式：