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 来开发前端的样式有所帮助。