将多个变量传递给 pug 循环答案

【问题标题】：Pass multiple variables to pug loop将多个变量传递给 pug 循环
【发布时间】：2018-12-11 22:19:47
【问题描述】：

在一些 SCSS 中，我传递了多个变量来循环一些变体。

$row1ColTitle-bg--Colors: ("Red" #8f1324 #fff) ("Black" #000 #fff) ("Grey" #ccc #000) ("White" #fff #000);

@each $row in $rowTitlerow-bg--Colors {
$names: nth($row, 1);
$bgColor: nth($row, 2);
$txtColor: nth($row, 3);

我想为哈巴狗写一些类似的东西，但不知道如何解决。从这个开始，但需要合并变量数组。

each varColor in ['Red', "Black", 'Grey', 'White']
  div(class="row1ColTitle  row1ColTitle-bg--" + varColor)

感谢您的帮助。

【问题讨论】：

你有什么问题？我觉得很好。
我试图了解如何在 pug 中使用数组的语法。因此，在 ['Red', "Black", 'Grey', 'White'] 中“编码”每个 varColor 行我将如何编写它以使用 pub 循环中的变量。
请编辑您的问题并提供要为每一行输出的所需 HTML 示例。
这是我的 codePen codepen.io/Johndgraham/pen/QzLOwJ?editors=1100 在 PUG 的最后一行我有 button.rowButton__color--白色是我想使用数组的地方，所以最后两行灰色和白色，我可以更改该变量，使按钮变为红色。

标签： pug

【解决方案1】：

我将在这里猜测您想要同时操作背景颜色和按钮颜色。

首先，你需要像这样设置一个数组：

[
  {
    "background": "Red",
    "button": "White"
  },
  {
    "background": "Black",
    "button": "White"
  },
  {
    "background": "Grey",
    "button": "Black"
  },
  {
    "background": "White",
    "button": "Black"
  }
]

我建议该数组存在于您的路线中，但您也可以将其压缩到您的模板中。

然后，你可以像这样循环遍历它：

each color in theColors
  div(class="row1ColTitle  row1ColTitle-bg--" + color.background)
  ...
  button(class= "rowButton__color--" + color.button) Learn More

【讨论】：