章节索引 :

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