美文网首页
Stylus预处理器简介(七)内置方法9

Stylus预处理器简介(七)内置方法9

作者: 曲昶光 | 来源:发表于2021-07-21 14:06 被阅读0次

外部文件操作方法

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)

相关文章

网友评论

      本文标题:Stylus预处理器简介(七)内置方法9

      本文链接:https://www.haomeiwen.com/subject/qcwvpltx.html