@import 和 @require #

¥@import and @require

Stylus 支持 CSS 的字面量@import，以及动态导入或要求其他 Stylus 表。

¥Stylus supports both literal @import for CSS, as well as dynamic importing or requiring of other Stylus sheets.

字面量 CSS #

¥Literal CSS

任何带有 .css 扩展名的文件名都将变成字面量。例如：

¥Any filename with the extension .css will become a literal. For example:

@import "reset.css"

@import "reset.css"

渲染如下所示的字面量 CSS @import：

¥Render the literal CSS @import shown below:

@import "reset.css"

@import "reset.css"

Stylus 导入 #

¥Stylus Import

免责声明：在 @import 与 Stylus 表一起使用的所有地方，都可以使用 @require

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

当使用不带 .css 扩展名的 @import 时，假定它是 Stylus 表（例如 @import "mixins/border-radius"）。

¥When using @import without the .css extension, it's assumed to be a Stylus sheet (e.g., @import "mixins/border-radius").

@import 的工作原理是迭代目录数组，并检查该文件是否存在于其中的任何一个中（类似于节点的 require.paths）。该数组默认为单个路径，该路径源自 filename 选项的 dirname。因此，如果你的文件名是 /tmp/testing/stylus/main.styl，则导入将在 /tmp/testing/stylus/ 中查找。

¥**@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。这对于想要公开其所有功能但仍允许导入功能子集的库来说非常有用。

¥**@import** also supports index styles. This means when you @import blueprint, it will resolve either blueprint.styl or blueprint/index.styl. This is really useful for libraries that want to expose all their features, while still allowing feature subsets to be imported.

例如，常见的 lib 结构可能是：

¥For example, a common lib structure might be:

./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）。

¥In the example below, we set the paths options to provide additional paths to Stylus. Within ./test.styl, we could then @import "mixins/border-radius", or @import "border-radius" (since ./mixins is exposed to 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

除了 @import 之外，Stylus 还拥有 @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 支持块级导入。这意味着你不仅可以在根级别使用 @import，还可以嵌套在其他选择器或 at 规则中。

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

如果你有带有此代码的 bar.styl：

¥If you have a bar.styl with this code:

.bar
  width: 10px;

.bar
  width: 10px;

然后你可以将它导入到 foo.styl 中，如下所示：

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

你将得到编译后的 CSS：

¥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 支持 globbing。有了它，你可以使用文件掩码导入许多文件：

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

@import 'product/*'

@import 'product/*'

这将从 product 目录导入所有 Stylus 表，结构如下：

¥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

请注意，这也适用于 @require，因此如果你还有包含以下内容的 ./product/index.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'

那么 @require 'product/*' 将仅包含每个单独的工作表一次。

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

解析导入内的相对 URL #

¥Resolving relative urls inside imports

默认情况下，Stylus 不会解析导入的 .styl 文件中的 url，因此，如果你碰巧有一个 foo.styl 和 @import "bar/bar.styl"，其中包含 url("baz.png")，那么在生成的 CSS 中它也将是 url("baz.png")。

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

但是你可以通过使用 --resolve-url（或仅 -r）CLI 选项来更改此行为，以在生成的 CSS 中获取 url("bar/baz.png")。

¥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 导入 API #

¥JavaScript Import API

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

¥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')