JavaScript API

只要簡單地require模組，並使用提供的 Stylus 程式碼字串和（選用）options物件呼叫render()即可。

使用 Stylus 的框架應傳遞 filename 選項，以提供更佳的錯誤報告。

var stylus = require('stylus');

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

var stylus = require('stylus');

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

我們也可以用更漸進的方式執行相同操作

var stylus = require('stylus');

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

var stylus = require('stylus');

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

.set(設定, 值)

套用設定，例如 filename，或匯入 paths

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

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

.include(路徑)

.set('paths',...) 的漸進替代方案是 .include()。當公開提供路徑的外部 Stylus 函式庫時，這是理想的選擇。

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

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

.import(路徑)

延後匯入提供的 路徑，直到執行評估。以下範例基本上等於在 Stylus 表格中執行 @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);
});

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(名稱, 節點[, 原始])

透過傳遞 Node，我們可以定義全域變數。當根據其他變數的可用性公開函式庫中的條件式功能時，這很有用。例如，Nib 擴充函式庫有條件地支援 node-canvas，提供影像產生。

不過，這並不總是可用的，因此 Nib 可能定義

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

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

Stylus 也會在可能的情況下將 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'])

.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'])

注意：在預設情況下，JavaScript 物件變數會強制轉換為類似陣列的元組表達式。例如，{ foo: 'bar', bar: 'baz' } 會變成表達式 (foo 'bar') (bar 'baz')。如果您想要取得雜湊物件回傳，請將 raw 設為 true。

這些相同的規則也適用於 js 函式中的回傳值

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

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

.define(名稱, fn)

此方法允許您提供 JavaScript 定義的函式給 Stylus。請將它們視為 JavaScript 到 C++ 的繫結。當您在 Stylus 中無法執行某件事時，請在 JavaScript 中定義它！

在此範例中，我們定義了四個函式：add()、sub()、image-width() 和 image-height()。這些函式必須回傳 Node，此建構函式和其他節點可透過 stylus.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) {
  // assert that the node (img) is a String node, passing
  // the param name for error reporting
  utils.assertType(img, 'string', 'img');
  var path = img.val;

  // Grab bytes necessary to retrieve dimensions.
  // if this was real you would do this per format,
  // instead of reading the entire image :)
  var data = fs.readFileSync(__dirname + '/' + path);

  // GIF
  // of course you would support.. more :)
  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);
  });

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) {
  // assert that the node (img) is a String node, passing
  // the param name for error reporting
  utils.assertType(img, 'string', 'img');
  var path = img.val;

  // Grab bytes necessary to retrieve dimensions.
  // if this was real you would do this per format,
  // instead of reading the entire image :)
  var data = fs.readFileSync(__dirname + '/' + path);

  // GIF
  // of course you would support.. more :)
  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);
  });

如需進一步參考（直到文件完成），請參閱下列檔案

- `lib/nodes/*`
- `lib/utils.js`

- `lib/nodes/*`
- `lib/utils.js`

.use(fn)

呼叫時，會使用渲染器呼叫指定的 fn，讓您可以使用上述所有方法。這讓外掛程式可以輕鬆公開自己，定義函式、路徑等。

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

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

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

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

使用選項呼叫 render() 方法時，use 選項可以給予函式或要使用渲染器呼叫的函式陣列。

stylus.render(str, { use: mylib }, function(err, css){
  if (err) throw err;
  console.log(css);
});

stylus.render(str, { use: mylib }, function(err, css){
  if (err) throw err;
  console.log(css);
});

.deps()

傳回相依性陣列（匯入檔案）

stylus('@import "a"; @import "b"')
  .deps();

// => ['a.styl', 'b.styl']

stylus('@import "a"; @import "b"')
  .deps();

// => ['a.styl', 'b.styl']

另請參閱 --deps CLI 旗標。

stylus.resolver([options])

選用的內建函式，可用於解析匯入檔案中的相對網址

stylus(str)
  .define('url', stylus.resolver())
  .render(function(err, css) {

  });

stylus(str)
  .define('url', stylus.resolver())
  .render(function(err, css) {

  });

另請參閱 --resolve-url CLI 旗標。

選項

- `paths` additional resolution path(s)
- `nocheck` don't check file existence

- `paths` additional resolution path(s)
- `nocheck` don't check file existence

JavaScript API #

.set(設定, 值) #

.include(路徑) #

.import(路徑) #

.define(名稱, 節點[, 原始]) #

.define(名稱, fn) #

.use(fn) #

.deps() #

stylus.resolver([options]) #