@import 和 @require ​

Stylus 支持字面的 @import 用于 CSS，以及动态导入或引入其他 Stylus 文件。

字面 CSS ​

任何扩展名为 .css 的文件名都将成为字面值。例如：

@import "reset.css"

@import "reset.css"

渲染下面显示的字面 CSS @import：

@import "reset.css"

@import "reset.css"

Stylus 导入 ​

声明：在所有使用 @import 导入 Stylus 文件的地方，都可以使用 @require

当使用不带 .css 扩展名的 @import 时，假定它是一个 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

./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);
  });

/**
 * 模块依赖。
 */

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);
  });

Require ​

除了 @import 外，Stylus 还有 @require。它的工作方式几乎相同，但例外的是任何给定文件只导入一次。

块级导入 ​

Stylus 支持块级导入。这意味着你可以在根级别以外的地方使用 @import，比如嵌套在其他选择器或 at-rules 中。

如果你有一个 bar.styl 文件，包含以下代码：

.bar
  width: 10px;

.bar
  width: 10px;

那么你可以在 foo.styl 中这样导入它：

.foo
  @import 'bar.styl'

@media screen and (min-width: 640px)
  @import 'bar.styl'

.foo
  @import 'bar.styl'

@media screen and (min-width: 640px)
  @import 'bar.styl'

你将得到这样的编译后的 CSS 结果：

.foo .bar {
  width: 10px;
}
@media screen and (min-width: 640px) {
  .bar {
    width: 10px;
  }
}

.foo .bar {
  width: 10px;
}
@media screen and (min-width: 640px) {
  .bar {
    width: 10px;
  }
}

文件通配符 ​

Stylus 支持通配符。通过它，你可以使用文件掩码导入多个文件：

@import 'product/*'

@import 'product/*'

这将从 product 目录中导入所有的 stylus 文件，比如这样的结构：

./product
  |-- body.styl
  |-- foot.styl
  |-- head.styl

./product
  |-- body.styl
  |-- foot.styl
  |-- head.styl

注意，这也适用于 @require，所以如果你还有一个 ./product/index.styl，其内容为：

@require 'head'
@require 'body'
@require 'foot'

@require 'head'
@require 'body'
@require 'foot'

那么 @require 'product/*' 将只包含每个单独的文件一次。

解析导入文件中的相对路径 URL ​

默认情况下，Stylus 不会解析导入的 .styl 文件中的 URL，所以如果你有一个 foo.styl 文件，其中包含 @import "bar/bar.styl"，而后者有 url("baz.png")，那么在结果 CSS 中它也会是 url("baz.png")。

但你可以通过使用 --resolve-url（或简写为 -r）CLI 选项来改变这种行为，以便在结果 CSS 中得到 url("bar/baz.png")。

JavaScript 导入 API ​

当使用 .import(path) 方法时，这些导入会被推迟到评估时：

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);
});

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'

...等同于...

.import('mixins/vendor')

.import('mixins/vendor')