导入(@import and @require) #

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

字面CSS(Literal CSS) #

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

@import "reset.css"

@import "reset.css"

Render the literal CSS @import shown below:

@import "reset.css"

@import "reset.css"

Stylus式导入(Stylus Import) #

Disclaimer: In all places the @import is used with Stylus sheets, the @require could be used

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

@import works by iterating an array of directories, and checking if this file lives in any of them (similar to node's require.paths). This array defaults to a single path, which is derived from the filename option's dirname. So, if your filename is /tmp/testing/stylus/main.styl, then import will look in /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);
  });

Require #

Along with @import, Stylus also has @require. It works almost in the same way, with the exception of importing any given file only once.

Block-level import #

Stylus supports block-level import. It means that you can use @import not only at root level, but also nested inside other selectors or at-rules.

If you have a bar.styl with this code:

.bar
  width: 10px;

.bar
  width: 10px;

Then you can import it inside a foo.styl like this:

.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'

And you'll get this compiled CSS as a result:

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

File globbing #

Stylus supports globbing. With it you could import many files using a file mask:

@import 'product/*'

@import 'product/*'

This would import all the stylus sheets from the product directory in such structure:

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

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

Note that this works with @require too, so if you would have also a ./product/index.styl with this content:

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

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

then @require 'product/*' would include each individual sheet only once.

Resolving relative urls inside imports #

By default Stylus doesn't resolve the urls in imported .styl files, so if you'd happen to have a foo.styl with @import "bar/bar.styl" which would have url("baz.png"), it would be url("baz.png") too in a resulting CSS.

But you can alter this behavior by using --resolve-url (or just -r) CLI option to get url("bar/baz.png") in your resulting CSS.

JavaScript Import API #

When using the .import(path) method, these imports are deferred until evaluation:

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

The following statement...

@import 'mixins/vendor'

@import 'mixins/vendor'

...is equivalent to...

.import('mixins/vendor')

.import('mixins/vendor')