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 有一個更全面的了解，這個在項目中并不是很常用，而且在一個前端項目中輸出格式的設置一般為一次性的工作，基本都是由整個項目的前端負責人或架構師來完成。

不過你還是要了解這四種輸出格式：嵌套格式、展開格式、緊湊格式和壓縮格式之間的區別。尤其是壓縮格式，它基本都是在線上環境（生產環境）中使用的，因為我們線上的樣式文件體積是越小越好，越有利于用戶體驗！最后請你根據下面這張圖來回憶一下本節講的四種輸出格式：