Stylus

Appearance

On this page

JavaScript API ​

只需 require 模块，然后使用给定的 Stylus 代码字符串和（可选的）options 对象调用 render()。

使用 Stylus 的框架应传递 filename 选项以提供更好的错误报告。

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

我们也可以用更渐进的方式做同样的事情：

js
var stylus = require('stylus');

stylus(str)
  .set('filename', 'nesting.css')
  .render(function(err, css){
    // 逻辑处理
  });

var stylus = require('stylus');

stylus(str)
  .set('filename', 'nesting.css')
  .render(function(err, css){
    // 逻辑处理
  });

.set(setting, value) ​

应用设置，如 filename 或导入 paths：

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

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

.include(path) ​

.include() 是 .set('paths',...) 的渐进式替代方案。当公开暴露路径的外部 Stylus 库时，这是理想的选择。

js
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(path) ​

推迟导入给定的 path，直到执行评估。下面的示例本质上与在 Stylus 表单中执行 @import 'mixins/vendor' 相同。

js
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(name, node[, raw]) ​

通过传递一个 Node，我们可以定义一个全局变量。当根据另一个库的可用性有条件地公开库内的特性时，这很有用。例如 Nib 扩展库有条件地支持 node-canvas，提供图像生成。

然而，这并不总是可用，所以 Nib 可能会定义：

js
.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 等效值。以下是一些示例：

js
.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 函数中的返回值：

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

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

.define(name, fn) ​

此方法允许你向 Stylus 提供一个由 JavaScript 定义的函数。可以将其视为 JavaScript 到 C++ 的绑定。当 Stylus 中无法完成某些操作时，请在 JavaScript 中定义！

在这个示例中，我们定义了四个函数：add()、sub()、image-width() 和 image-height()。这些函数必须返回一个 Node，这个构造函数和其他节点可通过 stylus.nodes 获得。

js
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) {
  // 断言节点（img）是一个 String 节点，传递参数名以便错误报告
  utils.assertType(img, 'string', 'img');
  var path = img.val;

  // 获取检索尺寸所需的字节。
  // 如果是真实情况，你将针对每种格式执行此操作，
  // 而不是读取整个图像 :)
  var data = fs.readFileSync(__dirname + '/' + path);

  // GIF
  // 当然你会支持更多 :)
  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) {
  // 断言节点（img）是一个 String 节点，传递参数名以便错误报告
  utils.assertType(img, 'string', 'img');
  var path = img.val;

  // 获取检索尺寸所需的字节。
  // 如果是真实情况，你将针对每种格式执行此操作，
  // 而不是读取整个图像 :)
  var data = fs.readFileSync(__dirname + '/' + path);

  // GIF
  // 当然你会支持更多 :)
  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);
  });

欲了解更多详情（直到文档完成），请参阅以下文件：

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

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

.use(fn) ​

调用时，给定的 fn 将使用渲染器调用，允许使用上面的所有方法。这使得插件可以轻松地公开自身，定义函数、路径等。

js
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
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
stylus('@import "a"; @import "b"')
  .deps();

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

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

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

See also --deps CLI flag.

stylus.resolver([options]) ​

Optional built-in function which may be used to resolve relative urls inside imported files:

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

  });

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

  });

See also --resolve-url CLI flag.

Options:

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

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

Released under the MIT License.

Copyright © 2010-2025 由www.uihtm.com整理翻译