Stylus 导入(@import)

• 

  定义和使用

  在 Stylus 支持字面 @import CSS, 也支持其他 Stylus 样式的动态导入。

  任何 .css 扩展的文件名将作为字面量。例如：

  @import "reset.css"
  

• 

  Stylus 导入

  当使用 @import 没有 .css 扩展，会被认为是 Stylus 片段（如：@import "mixins/border-radius"）。

  @import 工作原理为：遍历目录队列，并检查任意目录中是否有该文件（类似node的require.paths）。该队列默认为单一路径，从filename选项的dirname衍生而来。 因此，如果你的文件名是 /tmp/testing/stylus/main.styl，导入将显现为 /tmp/testing/stylus/。

  @import 也支持索引形式。这意味着当你 @import blueprint, 则会理解成 blueprint.styl 或 blueprint/index.styl. 对于库而言，这很有用，既可以展示所有特征与功能，同时又能导入特征子集。

  如下很常见的库结构：

  ./tablet
  |-- index.styl 
  |-- vendor.styl 
  |-- buttons.styl 
  |-- images.styl 
  

  下面这个例子中，我们设置 paths 选项用来为 Stylus 提供额外路径。在 ./test.styl 中，我们可以 @import "mixins/border-radius" 或 @import "border-radius"（因为./mixins 暴露给了Stylus）。

  /**
    * 依赖模块
    */
  
   var stylus = require('../')
     , str = require('fs').readFileSync(__dirname + '/test.styl', 'utf8');
  
   var paths = [
       __dirname
     , __dirname + '/mixins'
   ];
  
   stylus(str)
     .set('filename', __dirname + '/test.styl')
     .set('paths', paths)
     .render(function(err, css){
       if (err) throw err;
       console.log(css);
     });
  

• 

  JavaScript导入API

  当使用 .import(path) 方法，这些导入是被推迟的，直到赋值。

  任何 .css 扩展的文件名将作为字面量。例如：

  var stylus = require('../')
    , str = require('fs').readFileSync(__dirname + '/test.styl', 'utf8');
  
  stylus(str)
    .set('filename', __dirname + '/test.styl')
    .import('mixins/vendor')
    .render(function(err, css){
    if (err) throw err;
    console.log(css);
  });
  

  下面语句：

  @import 'mixins/vendor'
  

  等同于：

  .import('mixins/vendor')