Stylus @import

導(dǎo)入(@import)

導(dǎo)入

Stylus支持字面@import CSS, 也支持其他Stylus樣式的動(dòng)態(tài)導(dǎo)入。

字面CSS

任何.css擴(kuò)展的文件名將作為字面量。例如：

@import "reset.css"

渲染如下：

@import "reset.css"

Stylus導(dǎo)入

當(dāng)使用@import沒(méi)有.css擴(kuò)展，會(huì)被認(rèn)為是Stylus片段（如：@import "mixins/border-radius"）。

@import工作原理為：遍歷目錄隊(duì)列，并檢查任意目錄中是否有該文件（類似node的require.paths）。該隊(duì)列默認(rèn)為單一路徑，從filename選項(xiàng)的dirname衍生而來(lái)。 因此，如果你的文件名是/tmp/testing/stylus/main.styl，導(dǎo)入將顯現(xiàn)為/tmp/testing/stylus/。

@import也支持索引形式。這意味著當(dāng)你@import blueprint, 則會(huì)理解成blueprint.styl或blueprint/index.styl. 對(duì)于庫(kù)而言，這很有用，既可以展示所有特征與功能，同時(shí)又能導(dǎo)入特征子集。

如下很常見(jiàn)的庫(kù)結(jié)構(gòu)：

./tablet
  |-- index.styl 
  |-- vendor.styl 
  |-- buttons.styl 
  |-- images.styl 

下面這個(gè)例子中，我們?cè)O(shè)置paths選項(xiàng)用來(lái)為Stylus提供額外路徑。在./test.styl中，我們可以@import "mixins/border-radius"或@import "border-radius"（因?yàn)?/mixins 暴露給了Stylus）。

  /**
   * 依賴模塊
   */

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

JavaScript導(dǎo)入API

當(dāng)使用.import(path)方法，這些導(dǎo)入是被推遲的，直到賦值。

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

下面語(yǔ)句：

@import 'mixins/vendor'

等同于：

.import('mixins/vendor')