@import 和 @require

Stylus 同時支援文字 @import for 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;
  }
}

檔案 glob

Stylus 支援 glob。你可以用檔案遮罩匯入多個檔案

@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，因此如果你碰巧有一個 foo.styl 檔案，其中包含 @import "bar/bar.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 匯入 #

需要 #

區塊層級匯入 #

檔案 glob #

解析匯入中的相對 URL #

JavaScript 匯入 API #