Stylus 通过 Javascript API 定义 mixin答案

【问题标题】：Stylus define mixin via Javascript APIStylus 通过 Javascript API 定义 mixin
【发布时间】：2015-03-11 22:40:12
【问题描述】：

我有一些通过 .define() 定义的函数，例如：

function sum(a,b){
	return new nodes.Unit((a + b), 'px')
}

//...

.define('sum', sum);

效果很好，我可以访问我的 .styl 文件（例如 margin sum(10,5)）

现在我正在尝试通过 javascript 传递手写笔 mixin：

function border(color){
	return "border: 1px solid" + color
}

//...

.define('border', border)

div
  border(blue)

应该编译为：

div
  border: 1px solid blue

类似这样的东西..但令人惊讶的是它不起作用

你有什么想法吗？

我也尝试过使用它，但不知道如何准确使用：

style.define('border', new stylus.nodes.Function('border', 'color', 'border: 1px solid color'));

【问题讨论】：

标签： javascript mixins middleware stylus

【解决方案1】：

您不能只将带有 stylus 代码的字符串传递给 define，因为 Stylus 不知道它是一个代码（它会自动将 JS 字符串强制转换为 Stylus 字符串）。您应该使用stylus.Parser 解析此字符串。例如：

var stylus = require('stylus'),
    fs = require('fs'),
    Parser = stylus.Parser,
    filename = 'test.styl';

stylus(fs.readFileSync(filename, 'utf-8'))
    .set('filename', filename)
    .define('func', function() {
        var parser = new Parser('body { test: 1 + 1 }', { filename: filename });
        return parser.parse();
    }).render(function(err, css) {
        if (err) throw err;
        console.log(css);
    });

但它不是很有用，因为您不能在这些函数中使用在您的手写笔文件中定义的变量。基本上define 仅适用于纯函数（不是返回手写笔代码的混合）。

【讨论】：