Question

在尝试使用该代码进行迭代时，我试图生成带有手写笔{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}，但是我猜在调用手写笔{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}()

在迭代中使用一个变量调用手写笔{block}

1 个答案: