Stylus JavaScript API

JavaScript API

JavaScript API

require模塊，用給定的Stylus代碼字符串調(diào)用render()，以及（可選的）optional對象。

傳遞filename參數(shù)可以利用Stylus框架提供更好的錯誤報告。

var stylus = require('stylus');

stylus.render(str, { filename: 'nesting.css' }, function(err, css){
  if (err) throw err;
  console.log(css);
});

我們可以用更漸進(jìn)的方式實現(xiàn)做一樣的事：

var stylus = require('stylus');

stylus(str)
  .set('filename', 'nesting.css')
  .render(function(err, css){
    // logic
  });

.set(setting, value)

應(yīng)用諸如filename的設(shè)置，或?qū)雙aths:

.set('filename', __dirname + '/test.styl')
 .set('paths', [__dirname, __dirname + '/mixins'])

.include(path)

漸進(jìn)替換.set('paths',...)的就是.include(). 當(dāng)其他Stylus庫（已暴露路徑）暴露的時候，這個是理想的選擇。

stylus(str)
  .include(require('nib').path)
  .include(process.env.HOME + '/mixins')
  .render(...)

.import(path)

推遲給定path導(dǎo)入，直到計算被執(zhí)行。下面這個例子基本上跟在Stylus片段中執(zhí)行@import 'mixins/vendor'一樣：

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

.define(name, node)

通過傳遞一個Node，我們可以定義一個全局變量。當(dāng)庫（該庫依賴于其它庫可用性）里面暴露某些條件特征的時候，這個就很有用。例如Nib擴(kuò)展庫條件支持node-canvas, 提供圖片生成。

但這并不是一直可用的，因此Nib可以定義：

.define('has-canvas', stylus.nodes.false);
 .define('some-setting', new stylus.nodes.String('some value'));

如果可能，Stylus也會轉(zhuǎn)換JavaScript值為Stylus值。

.define('string', 'some string')
 .define('number', 15.5)
 .define('some-bool', true)
 .define('list', [1,2,3])
 .define('list', [1,2,[3,4,[5,6]]])
 .define('list', { foo: 'bar', bar: 'baz' })
 .define('families', ['Helvetica Neue', 'Helvetica', 'sans-serif'])

下面是一些規(guī)則應(yīng)用在js函數(shù)返回值上：

.define('get-list', function(){
  return ['foo', 'bar', 'baz'];
})

.define(name, fn)

該方法允許你未Stylus提供JavaScript定義的函數(shù)。正如想到JavaScript用C++綁定。當(dāng)有一些事情無法用Stylus完成的時候，就在JavaScript中定義它。

下面這個例子，我們定義了4個函數(shù)：add(), sub(), image-width(), image-height(). 這些函數(shù)必須返回一個Node, 通過stylus.nodes該構(gòu)造以及其它nodes都可以了。

  var stylus = require('../')
    , nodes = stylus.nodes
    , utils = stylus.utils
    , fs = require('fs');

  function add(a, b) {
    return a.operate('+', b);
  }

  function sub(a, b) {
    return a.operate('-', b);
  }

  function imageDimensions(img) {
    // 宣告 node (img) 是一個 String 節(jié)點, 
    // 為錯誤報告?zhèn)鬟f參數(shù)名
    utils.assertType(img, 'string', 'img');
    var path = img.val;

    // 得到尺寸有必要取得字節(jié)數(shù)
    // 如果這是真的，你會每種格式都處理下，
    // 而不是讀取整個圖片 :)
    var data = fs.readFileSync(__dirname + '/' + path);

    // GIF
    // 當(dāng)然，你可以支持更多 :)
    if ('GIF' == data.slice(0, 3).toString()) {
      var w = data.slice(6, 8)
        , h = data.slice(8, 10);
      w = w[1] << 8 | w[0];
      h = h[1] << 8 | h[0];
    }

    return [w, h];
  }

  function imageWidth(img) {
    return new nodes.Unit(imageDimensions(img)[0]);
  }

  function imageHeight(img) {
    return new nodes.Unit(imageDimensions(img)[1]);
  }

  stylus(str)
    .set('filename', 'js-functions.styl')
    .define('add', add)
    .define('sub', sub)
    .define('image-width', imageWidth)
    .define('image-height', imageHeight)
    .render(function(err, css){
      if (err) throw err;
      console.log(css);
    });

為了進(jìn)一步的參考（直到本文檔全部結(jié)束），請看下面的文件：

• lib/nodes/*
• lib/utils.js

.use(fn)

當(dāng)被調(diào)用時，給定fn被渲染器調(diào)用，允許所有上面的方法被使用。這允許插件輕易地暴露自己，定義函數(shù)，路徑等。

var mylib = function(style){
  style.define('add', add);
  style.define('sub', sub);
};

stylus(str)
  .use(mylib)
  .render(...)