@IMPORT 和 @REQUIRE
Stylus支持@import CSS字面值, 也支持其他Stylus样式的动态导入。
字面CSS(Literal CSS)
任何.css扩展的文件名将作为字面量。例如：
@import "reset.css"
渲染CSS 字面值@import如下所示:
@import "reset.css"
Stylus式导入(Stylus Import)
免责声明:在所有与Stylus表一起使用的地方，都可以使用@require
当使用@import没有.css扩展名，则会被认为是Stylus片段（如：@import "mixins/border-radius"）。
@import 工作原理为：遍历目录队列，并检查任意目录中是否有该文件（类似node的require.paths）。该队列默认为单一路径，从filename选项的dirname衍生而来。 因此，如果你的文件名是/tmp/testing/stylus/main.styl，导入将显现为/tmp/testing/stylus/。
@import还支持索引样式。这意味着当你@import blueprint时，它将解析任意一个蓝图。/ index.styl styl或蓝图。这对于那些想要公开所有特性，同时仍然允许导入特性子集的库来说非常有用。
例如，一个常见的lib结构可能是:
./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);
});
Require
除了@import, Stylus还有@require。它几乎以相同的方式工作，除了只导入一次给定的文件
Block-level import
Stylus支持块级导入。这意味着您不仅可以在根级别使用@import，还可以嵌套在其他选择器或at-rules中。
如果你有一个酒吧。样式与以下代码:
.bar
width: 10px;
然后你可以在' foo.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;
}
}
File globbing
Stylus支持通配符。使用它，你可以导入许多文件使用文件蒙版:
@import 'product/*'
这将以这样的结构从产品目录中导入所有的' stylus '表:
./product
|-- body.styl
|-- foot.styl
|-- head.styl
注意，这也适用于@require，所以如果你也有。/product/index。样式与此内容:
@require 'head'
@require 'body'
@require 'foot'
然后@require 'product/*'将只包含每个单独的表单一次。
解析导入中的相对url
默认情况下，Stylus不会解析导入的. style文件中的url，所以如果你碰巧有一个' foo.styl'与@import "bar/bar。样式，它将有url("baz.png")，它将是url("baz.png")在结果的CSS。
但是你可以通过使用——resolve-url(或-r) CLI选项来改变这种行为，在你的CSS中获取url("bar/baz.png")。
JavaScript Import 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);
});
下面的语句……
@import 'mixins/vendor'
…相似于…
.import('mixins/vendor')
