@import と @require #

Stylus は、CSS のリテラル @import と、他の Stylus シートの動的なインポートまたは require の両方をサポートしています。

リテラル CSS #

拡張子が .css のファイル名はすべてリテラルになります。例:

@import "reset.css"

@import "reset.css"

以下のリテラル CSS @import をレンダリングします

@import "reset.css"

@import "reset.css"

Stylus のインポート #

免責事項: Stylus シートで @import を使用するすべての場所で、@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

以下の例では、Stylus に追加のパスを提供するために paths オプションを設定します。./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 #

@import とともに、Stylus には @require もあります。これは、特定のファイルを一度だけインポートすることを除いて、ほとんど同じように機能します。

ブロックレベルのインポート #

Stylus は、ブロックレベルのインポートをサポートしています。つまり、ルートレベルだけでなく、他のセレクターや @規則内にもネストして @import を使用できます。

次のコードを含む 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 を解決しないため、url("baz.png") を持つ @import "bar/bar.styl" を持つ foo.styl がある場合、結果の 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')