Стилус определяет миксин через Javascript API

У меня есть некоторые функции, определенные с помощью .define(), например:

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

//...

.define('sum', sum);

это прекрасно работает, у меня есть доступ к моим файлам .styl (например, margin sum(10,5))

Теперь я пытаюсь передать миксин стилуса через javascript:

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 stylus middleware mixins
person Mangocrack    schedule 11.03.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы не можете просто передать строку с кодом стилуса в 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 предназначен только для чистых функций (не миксинов, которые возвращают код стилуса).

person Panya    schedule 12.03.2015