外部文件操作方法
json(path[, options])
将“path”的JSON文件转换为Stylus变量或对象。嵌套的变量对象键用破折号(' - ')连接。
例如,下面的示例“media-queries.json”文件:
{
"small": "screen and (max-width:400px)",
"tablet": {
"landscape": "screen and (min-width:600px) and (orientation:landscape)",
"portrait": "screen and (min-width:600px) and (orientation:portrait)"
}
}
可以用在以下几种方式:
json('media-queries.json')
@media small
// => @media screen and (max-width:400px)
@media tablet-landscape
// => @media screen and (min-width:600px) and (orientation:landscape)
vars = json('vars.json', { hash: true })
body
width: vars.width
vars = json('vars.json', { hash: true, leave-strings: true })
typeof(vars.icon)
// => 'string'
// don't throw an error if the JSON file doesn't exist
optional = json('optional.json', { hash: true, optional: true })
typeof(optional)
// => 'null'
use(path)
你可以用' use() '函数在' path '中使用任何JS-plugin。Styl '文件,像这样:
use("plugins/add.js")
width add(10, 100)
// => width: 110
在这个例子中' add.js '插件看起来是这样的:
var plugin = function(){
return function(style){
style.define('add', function(a, b) {
return a.operate('+', b);
});
};
};
module.exports = plugin;
如果你想返回任何Stylus对象,如' RGBA ', ' Ident ',或' Unit ',你可以使用提供的Stylus节点如下
var plugin = function(){
return function(style){
var nodes = this.nodes;
style.define('something', function() {
return new nodes.Ident('foobar');
});
};
};
module.exports = plugin;
你可以使用hash对象将任何选项作为第二个可选参数传递:
use("plugins/add.js", { foo: bar })
Undefined Functions
未定义函数以文字形式输出。例如,我们可以在css中调用' rgba-stop(50%, #fff) ',它会输出你所期望的结果。我们也可以在helper中使用它。
在下面的例子中,我们简单地定义了函数' stop() ',它返回字面量' rgba-stop() '调用。
stop(pos, rgba)
rgba-stop(pos, rgba)
stop(50%, orange)
// => rgba-stop(50%, #ffa500)
网友评论