2013-10-07 3 views
2

Если у меня есть несколько переменных в стилуса, как это:Как вывести переменную с синтаксисом Stylus

emphasisBackground = emphasis(0%, emphasisTop, emphasisBottom) 
emphasisHover = emphasis(20%, emphasisTop, emphasisBottom) 
emphasisActive = emphasis(-10%, emphasisTop, emphasisBottom) 

акцент мой собственный Mixin, который возвращает некоторые свойства, как фон, фильтр (для IE) и т.д. как я могу отобразить эти переменные?

a 
    emphasisBackground 

это не работает, стилус считает, что это свойство, а не переменная

a unquote(s('%s',emphasisBackground)) 

это не работает, либо, он просто печатает свойство фильтра для IE, но не все из линии переменной

Должен ли я превращать эти вещи в смесины?

ответ

1

Один из способов получить такой эффект будет гнездовых Mixins

// Mixin that does the work (whatever that is) 
emphasis(percent, eStart, eStop) 
    . 
    . 
    . 

// Helper mixins 
emphasisBackground 
    emphasis(0%, emphasisTop, emphasisBottom) 

emphasisHover 
    emphasis(20%, emphasisTop, emphasisBottom) 

emphasisActive 
    emphasis(-10%, emphasisTop, emphasisBottom) 

затем использовать его так же, как вы сейчас.

a 
    emphasisHover 

Если это неприемлемо, вы можете добавить немного больше деталей о том, что вы делаете, и я буду видеть, если я могу помочь вам.

+0

Это именно то, что я сделал. Это просто заставляет меня чувствовать, что стилус не имеет большой поддержки для контроля за оценкой. Хотя я могу назначать вещи переменным, их невозможно распечатать, если они не являются миксинами. – iopq

+0

Я не думаю, что есть какой-либо способ интерполировать переменные в результате параметризации mixin. Это было бы классной стенографией. Не то, что вы хотите, а немного более компактным, - сделать одну строку emphasisActive() {emphais (0%, emphasisTop, emphasisBottom)} – Idistic

0

В последней версии Stylus находится @block поддержка (docs).

С его помощью вы можете сделать любую функцию возвращать block объект, который можно сохранить в переменной, а затем использовать в любом месте вы хотите, абстрактный пример:

foo(w, h) 
    return @block { 
    width: w 
    height: h 
    } 

bar = foo(10px, 20px) 
baz = foo(20px, 30px) 

a 
    {bar} 

b 
    {baz} 

будет оказывать

a { 
    width: 10px; 
    height: 20px; 
} 
b { 
    width: 20px; 
    height: 30px; 
} 
Смежные вопросы