Sass 輸出格式

1. 簡(jiǎn)介

在 Sass 中有 4 種輸出格式，它們分別是嵌套格式、展開格式、緊湊格式和壓縮格式；本節(jié)內(nèi)容我們將講解這四種輸出格式的區(qū)別以及設(shè)置他們的方法。

2. 什么是 Sass 輸出格式

不同的編碼語言都有不同的格式，比如縮進(jìn)、換行、空格等等，Sass 輸出格式指的就是轉(zhuǎn)換為 CSS 代碼的格式。

3. 四種輸出格式

3.1 嵌套格式（:nested）

嵌套格式是 Sass 中的默認(rèn)輸出格式，這種格式選擇器和屬性都會(huì)獨(dú)占一行，能更好的反應(yīng)出 HTML 元素和樣式的關(guān)系，同時(shí)縮進(jìn)也會(huì)與 Sass 中的縮進(jìn)保持一致，一般來說這種格式使得我們的樣式結(jié)構(gòu)更清晰、更易讀。我們舉例看下這種格式：

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

3.2 展開格式（:expanded）

展開格式就像我們平時(shí)手寫 CSS 的格式一樣，屬性、選擇器都會(huì)獨(dú)占一行，屬性會(huì)縮進(jìn)，選擇器不會(huì)縮進(jìn)而是頂頭的，前面章節(jié)中我們演示的例子轉(zhuǎn)為的 CSS 代碼就都是展開格式的，我們舉個(gè)例子看下這種格式：

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

從上面的代碼就可以看出來，這種格式的縮進(jìn)、換行等其實(shí)和我們平時(shí)項(xiàng)目中寫的 CSS 的格式是一樣的。

3.3 緊湊格式（:compact）

看名字就知道，這種格式占用的空間肯定是小的，每個(gè)選擇器和其 CSS 樣式只占用一行，而且嵌套的選擇器之間沒用空行，只有不嵌套的選擇器之間才會(huì)有空行，空行的意思其實(shí)就是分隔符，我們舉例看下這種格式：

.box { width: 100px; }

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

從上面可以看出這種格式轉(zhuǎn)換的 CSS 的代碼更為緊湊，占據(jù)的空間更小，不過當(dāng)內(nèi)容多了后讀起來可能不是很方便。

3.4 壓縮格式（:compressed）

通過字面意思看，這種格式是將生成的 CSS 代碼直接壓縮，刪除所有無意義的空行、換行、空格以及注釋，從而將生成的代碼體積盡量壓縮至最小，在壓縮的同時(shí)會(huì)對(duì)生成的代碼進(jìn)行一些調(diào)整將體積壓縮至更小，我們舉個(gè)例子看下壓縮后的 CSS 代碼：

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

上面這種壓縮后的代碼我們基本是沒法看和更改的，所以這種格式一般用于生產(chǎn)環(huán)境，也就是上線的時(shí)候會(huì)調(diào)整為這種格式來輸出。

4. 輸出格式的設(shè)置

上面我們講了 4 中輸出格式，接下來我們講解如何在 Sass 中設(shè)置不同的輸出格式，我們可以通過在命令行中編寫如下的命令來設(shè)置不同的輸出格式：

// 設(shè)置為嵌套格式
$ sass --style=nested style.scss a.scss
// 設(shè)置為展開格式
$ sass --style=expanded style.scss a.scss
// 設(shè)置為緊湊格式
$ sass --style=compact style.scss a.scss
// 設(shè)置為壓縮格式
$ sass --style=compressed style.scss a.scss

上面是在命令行設(shè)置輸出格式，但我們一般都是在前端項(xiàng)目里使用 Sass 的，很少直接在命令行使用，那該怎么設(shè)置呢？我們一般都會(huì)安裝 node-sass 這個(gè)依賴包，node-sass 的設(shè)置選項(xiàng)中有一個(gè) outputStyle 可以用于設(shè)置輸出格式，示例如下：

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

在前端的項(xiàng)目中我們一般會(huì)使用 webpack 作為構(gòu)建工具，所以我們可以在 sass-loader 中來設(shè)置 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'
              },
            },
          },
        ],
      },
    ],
  },
};

目前大多數(shù)的前端項(xiàng)目使用 Sass 的話都會(huì)使用 sass-loader 這個(gè)依賴包，所以我們可以在 sass-loader 的配置項(xiàng)中根據(jù)不同的環(huán)境來作區(qū)分，來動(dòng)態(tài)的設(shè)置輸出格式。

5. 小結(jié)

本節(jié)內(nèi)容我們講解了 Sass 的輸出格式，這是為了讓你對(duì) Sass 有一個(gè)更全面的了解，這個(gè)在項(xiàng)目中并不是很常用，而且在一個(gè)前端項(xiàng)目中輸出格式的設(shè)置一般為一次性的工作，基本都是由整個(gè)項(xiàng)目的前端負(fù)責(zé)人或架構(gòu)師來完成。

不過你還是要了解這四種輸出格式：嵌套格式、展開格式、緊湊格式和壓縮格式之間的區(qū)別。尤其是壓縮格式，它基本都是在線上環(huán)境（生產(chǎn)環(huán)境）中使用的，因?yàn)槲覀兙€上的樣式文件體積是越小越好，越有利于用戶體驗(yàn)！最后請(qǐng)你根據(jù)下面這張圖來回憶一下本節(jié)講的四種輸出格式：