INTROSPECTION API
Stylus支持INTROSPECTION API。这允许mixin和函数相对于调用者进行反射，等等。
mixin
mixin局部变量会在函数体中自动赋值。如果函数在根级别被调用，它将包含字符串根，否则将阻塞，如果被调用的函数期望返回值，则最后为false。
在下面的例子中，我们定义了reset()来改变它
reset()
if mixin == 'root'
got
root true
else if mixin
got 'a mixin'
else
'not a mixin'
reset()
body
reset()
foo reset()
编译:
got {
root: true;
}
body {
foo: "not a mixin";
got: "a mixin";
}
JAVASCRIPT API
只需·require·模块，调用·render()·带有给定的Stylus代码字符串和(可选的)·options·object。
使用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(str)
.set('filename', 'nesting.css')
.render(function(err, css){
// logic
});
.set(setting, value)
应用设置，如文件名或导入路径:
.set('filename', __dirname + '/test.styl')
.set('paths', [__dirname, __dirname + '/mixins'])
.include(path)
.set('paths'，…)的一个渐进替代方法是.include()。当公开公开路径的外部Stylus库时，这是理想的
stylus(str)
.include(require('nib').path)
.include(process.env.HOME + '/mixins')
.render(...)
.import(path)
推迟导入给定路径，直到执行计算。下面的例子本质上与在你的手写笔表中执行@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，我们可以定义一个全局变量。当根据另一个库的可用性在库中公开条件特性时，这是非常有用的。例如，Nib扩展库有条件地支持节点画布，提供图像生成。
然而，这并不总是可用的，所以Nib可以定义:
.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'])
同样的规则也适用于js函数的返回值:
.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获得。
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
.use(fn)
当调用时，给定的fn将与呈现程序一起调用，从而允许使用上面的所有方法。这允许插件很容易地暴露自己，定义函数、路径等。
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);
});
.deps()
返回依赖数组(导入文件):
stylus('@import "a"; @import "b"')
.deps();
// => ['a.styl', 'b.styl']
请参见-deps CLI标志。
stylus.resolver([options])
可选的内置函数，可用于解析导入文件中的相对url:
stylus(str)
.define('url', stylus.resolver())
.render(function(err, css) {
});
请参见-resolve-url命令行标志。
Options:
paths 额外的解决路径(s)
nocheck 不要检查文件是否存在
网友评论