@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通过迭代目录数组并检查此文件是否存在于其中任何目录中（类似于节点的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）。

/**
 * Module dependencies.
 */

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

/**
 * Module dependencies.
 */

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

需要

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

块级导入

Stylus 支持块级导入。这意味着你不仅可以在根级别使用 @import，还可以在其他选择器或 at 规则中嵌套使用。

如果你有一个包含以下代码的 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，因此如果你碰巧有一个包含 @import "bar/bar.styl" 的 foo.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')

@import 和 @require #

文字 CSS #

Stylus 导入 #

需要 #

块级导入 #

文件通配 #

解析导入中的相对 URL #

JavaScript 导入 API #