Sass 的 JavaScriptAPI

1. 簡介

前面我們講解的所有內(nèi)容，基本都是在使用 Sass 為我們提供的擴(kuò)展功能，在使用 Sass 的語法，一般來說這些代碼都是寫在 .scss 為后綴的文件中的。而 Sass 還提供了一些 API 接口使得我們在 JS 中可以調(diào)用，也就是在 .js 為后綴的文件中去調(diào)用這些 API 。

這種方式在寫樣式中很不常用，但我們還是單獨拿出一個章節(jié)來講解它，以便你對 Sass 有一個更全面的認(rèn)識。另外

2. 什么是 Sass 的 JavaScriptAPI

API 指的是應(yīng)用程序接口，Sass 中提供了一系列供 javascript 調(diào)用的應(yīng)用程序接口。

3. 如何使用

在兩個主要的 Sass 庫 node-sass 和 dart-sass 中都支持 JavaScriptAPI ，并且它們的 API 語法都是相同的，本節(jié)內(nèi)容我們使用的是 node-sass 。使用的時候需要加載 Sass 并賦給一個變量，然后就可以調(diào)用 API 了，我們舉例看下：

var sass = require("node-sass");
sass.render({
  file: "style.scss"
}, function(err, result) {
  // ...
});

上面的代碼就是使用的方式，其實就是普通的 Javascript 語法，下面我們看下 Sass 都為我們提供了什么 API 。

4. 常用 API 舉例

4.1 render() 和 renderSync()

render() 函數(shù)是將 Sass 文件異步編譯為 CSS ，并在渲染完成時調(diào)用傳入的回調(diào)函數(shù)，它接收一個 options 參數(shù)和一個回調(diào)函數(shù)，options 參數(shù)是一個 Object 類型，它必須有 file 或 data 選項。我們舉例來看下：

var sass = require('node-sass'); 
sass.render({
  file: "style.scss"
}, function(err, result) {
  // 回調(diào)函數(shù)，在渲染完調(diào)用此函數(shù)
});

renderSync() 函數(shù)的作用與 render() 函數(shù)是相同的，唯一不同的是 renderSync() 函數(shù)是同步的，這需要你對 javascript 中的同步異步有深入的了解，所以對于同步函數(shù)，如果執(zhí)行失敗我們需要捕獲錯誤并拋出，我們舉例看下：

var sass = require('node-sass'); 
try {
  var result = sass.renderSync({file: "style.scss"});
} catch(e) {
  throw new Error(e.message)
}

上面我們可以看到調(diào)用 renderSync() 或者 render() 函數(shù)都會返回 result ，返回的 result 是一個 Object，它都包含什么呢？我們下面講解下。

4.1.1 result.css

編譯為 css 后的內(nèi)容，是一段 Buffer ，我們可以通過調(diào)用 JS 的 toString() 方法來解析它，如下所示：

var sass = require('node-sass'); 
try {
  var result = sass.renderSync({file: "style.scss"});
  // 編譯的 CSS
  console.log(result.css.toString())
} catch(e) {
  throw new Error(e.message)
}

4.1.2 result.map

這個返回的是編譯后的 CSS 到源文件的一個映射，它是一個 Buffer，你可以理解為這就是一個 SourceMap。

4.1.3 result 中其他的屬性值

result 中還存了很多很多的屬性和值，為了你能更好的了解，我下面直接列出一個表格來展示這些：

4.1.4 error

renderSync() 或者 render() 函數(shù)也就返回 error ，這個 error 也是一個 Object ，同樣下邊我以表格的形式將 error 中的屬性值列出來：

4.2 info

這個 API 通過字面意思我們就知道，可以用它來獲取 Sass 的相關(guān)信息，包括使用的 Sass 的版本等等，我們舉例看下：

var sass = require('node-sass'); 
console.log(sass.info);

這個 API 很簡單，就是獲取到一些版本和當(dāng)前使用的 Sass 的信息，來供你處理或者做一些判斷邏輯。

5. 小結(jié)

本節(jié)內(nèi)容中我們列舉了幾個 Sass 的 JavascriptAPI ，根據(jù)下圖回憶一下吧：

這個章節(jié)的內(nèi)容是為了讓你更全面的認(rèn)識 Sass ，在實際的業(yè)務(wù)項目中，幾乎永遠(yuǎn)不會這么用。熟練的使用這些 API 還需要你擁有良好的 javascript 功底，所以當(dāng)你需要使用這些 API 的時候，相信你已經(jīng)是前端大牛了，開始利用這些 API 來擴(kuò)展 Sass 為你所用，在本系列的入門教程中，這部分是作為了解的知識，并不是特別重要。