Вызов Stylus {block} с переменной в итерации - PullRequest
Новая
       16

Вызов Stylus {block} с переменной в итерации

0 голосов
/ 28 февраля 2019

Я пытаюсь сгенерировать классы со вставками Stylus {block} во время итерации с этим кодом: 

// Blocks
flexbox =
  display flex

inline-flexbox =
  display inline-flex

// Properties collection
props = {
  'flexbox': 'flex',
  'inline-flexbox': 'inline-flex'
}

// Generating classes 
for kProp, vProp in props
  .u-{vProp}
     {kProp}

{kProp} должен выдавать {flexbox} и {inline-flexbox}, но я думаю,существует некоторый синтаксический конфликт между вызовом Stylus {block} и вызовом итерационной переменной.

Так что в основном с этим кодом я вообще ничего не получал.

Я также пытался сбежать { }, но безуспешно.

Кто-нибудь знает обходной путь?

1 Ответ

0 голосов
/ 04 марта 2019

Нет правильного решения, но я нашел некоторые обходные пути:

  • Вы можете заменить {blocks}, расширив $placeholders , но имейте в виду, что с помощью Stylus вы не можете расширяться внутриMedia Query (он просто игнорирует MQ-часть)
  • Вы можете просто заменить {blocks} на mixins() (и он работает внутри Media Queries), который я выбрал.

Итак, теперь мой код выглядит так: 

// Blocks
flexbox()
  display flex

inline-flexbox()
  display inline-flex

// Properties collection
props = {
  'flexbox': 'flex',
  'inline-flexbox': 'inline-flex'
}

// Generating classes 
for kProp, vProp in props
  .u-{vProp}
     {kProp}()
...