Sass 输出格式

1. 简介

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

2. 什么是 Sass 输出格式

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

3. 四种输出格式

3.1 嵌套格式（:nested）

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

.box {
	width: 100px; }
.box2 {
	width: 200px;
	height: 100px;  }
	.box2 p {
		color: red; }

3.2 展开格式（:expanded）

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

.box {
  width: 100px;
}
.box2 {
  width: 200px;
  height: 100px;
}
.box2 p {
  color: red;
}
.box2 .main {
  width: 100%;
  heigth: auto;
}

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

3.3 紧凑格式（:compact）

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

.box { width: 100px; }

.box2 { width: 200px; height: 100px; }
.box2 p { color: red; }
.box2 .main { width: 100%;heigth: auto; }

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

3.4 压缩格式（:compressed）

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

.box{width:100px;}.box2{width:200px;height:100px;}.box2 p{color:red;}.box2 .main{width:100%;heigth:auto;}

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

4. 输出格式的设置

上面我们讲了 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-loader 中来设置 sass 的输出格式，示例如下：

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

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

5. 小结

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

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