在迭代中使用变量调用Stylus {block}

Question

我正在尝试使用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}和调用迭代变量之间存在某种语法冲突。

所以基本上使用这段代码，我根本没有输出。

我也试图逃脱{ }但没有运气。

有没有人知道解决方法？

Answer 1

没有适当的解决方案，但我找到了一些解决方法：

• 您可以通过扩展{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}()