Sass 自定義導入

1. 簡介

自定義導入是本教程最后一個章節了，本章節的內容也是為了讓你進一步了解 Sass 提供的能力，在實際的項目中基本不會用到。在前邊的章節中我們詳細的講解了 Sass 的導入 @import 和 @use ，既然已經提供了導入文件的方法，自定義導入是什么呢？本節內容我們來了解一下。

2. 自定義導入

通過前面的講解我們知道，在 Sass 中可以通過 @import 或 @use 來導入文件內容、mixin 和函數等，它們都接收一個路徑，Sass 會根據其路徑來找到對應的文件。

除此之外 Sass 支持我們自定義導入器來完成各種我們想要的導入方式，導入的程序可以和普通的文件系統路徑一起放置在 load_paths 數組中。自定義導入除了需要你對計算機文件系統有所了解外，不同的 Sass 實現需要你有其對應的編程語言功底，所以自定義導入我們只作為了解的內容。

3. 使用場景

所有的 Sass 實現都提供了自定義導入的方法，通過自定義的導入方法可以控制 @imports 如何定位樣式表。

3.1 node-sass 的自定義導入

node-sass 是提供了一個自定義導入器的選項，并將它作為了 JavascriptAPI 的一部分暴露了出來。使用它需要 node-sass v2.0.0 及以上的版本，從 v3.0.3 版本開始導入程序可以返回錯誤。我們舉個例子來感受下：

var result = sass.renderSync({
  file: '/path/to/file.scss',
  data: 'body{background:blue; a{color:black;}}',
  outputStyle: 'compressed',
  outFile: '/to/my/output.css',
  // 自定義導入
  importer: function(url, prev, done) {
    // url: 路徑
    // prev: 上一個解析路徑
    // done: 一個可選的回調函數
    myImportFunction(url, prev, function(result){
      done({
        file: result.path,
        contents: result.data
      });
    });
    // OR
    var result = myImportFunction(url, prev);
    return {file: result.path, contents: result.data};
  }
});

從上面的代碼我們可以看到，在 node-sass 的自定義導入是通過 JavascriptAPI 來使用的，也就是我們上面配置的 importer ，importer 可以是一個函數也可以是一個函數數組， Sass 會按照數組中的順序依次調用函數。

3.2 dart-sass 的自定義導入

dart-sass 是提供了一個可擴展的導入器的抽象類（ imorter class ），我們用過擴展這個類來實現自定義導入，對于我們前端工程師來說，使用 Dart 語言開發的并不多。不過在前端項目中使用 dart-sass 的話，我們可以使用類似上面 node-sass 的配置方法，所以這里我們僅舉個在前端項目中使用 dart-sass 的例子來看一下：

var sass = require("sass");
var Fiber = require("fibers");
sass.render({
  file: "input.scss",
  importer: function(url, prev, done) {
    // ...
  },
  fiber: Fiber
}, function(err, result) {
  // ...
});

3.3 ruby-sass 的自定義導入

ruby-sass 為我們提供了一個抽象的基類 Sass::Importers::Base ，我們可以通過它來自定義導入器，擴展的子類的路徑名需要使用 URL 格式，不過這需要很強的 Ruby 語言基礎，這里我們就暫時不舉例子了，否則看著會很迷惑，還有就是 ruby-sass 已經逐漸被官方棄用，所以你僅需要了解下就好。

4. 小結

作為此教程的最后一個章節，主要的目的是讓你更全面的了解 Sass ，這節的自定義導入在我們前端項目中用到的非常非常少，幾乎不會出現，不過它也屬于 Sass 的能力，我們還是有必要知道的。

在 node-sass 中的自定義導入是我們需要著重了解的，因為我們大多數的前端項目都是引用的它。此教程至此就結束了，希望可以對你應用 Sass 來開發前端的樣式有所幫助。