Sass 自定義導(dǎo)入

1. 簡介

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

2. 自定義導(dǎo)入

通過前面的講解我們知道，在 Sass 中可以通過 @import 或 @use 來導(dǎo)入文件內(nèi)容、mixin 和函數(shù)等，它們都接收一個路徑，Sass 會根據(jù)其路徑來找到對應(yīng)的文件。

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

3. 使用場景

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

3.1 node-sass 的自定義導(dǎo)入

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

var result = sass.renderSync({
  file: '/path/to/file.scss',
  data: 'body{background:blue; a{color:black;}}',
  outputStyle: 'compressed',
  outFile: '/to/my/output.css',
  // 自定義導(dǎo)入
  importer: function(url, prev, done) {
    // url: 路徑
    // prev: 上一個解析路徑
    // done: 一個可選的回調(diào)函數(shù)
    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 的自定義導(dǎo)入是通過 JavascriptAPI 來使用的，也就是我們上面配置的 importer ，importer 可以是一個函數(shù)也可以是一個函數(shù)數(shù)組， Sass 會按照數(shù)組中的順序依次調(diào)用函數(shù)。

3.2 dart-sass 的自定義導(dǎo)入

dart-sass 是提供了一個可擴展的導(dǎo)入器的抽象類（ imorter class ），我們用過擴展這個類來實現(xiàn)自定義導(dǎo)入，對于我們前端工程師來說，使用 Dart 語言開發(fā)的并不多。不過在前端項目中使用 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 的自定義導(dǎo)入

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

4. 小結(jié)

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

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