Question

在某些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)

我们非常感谢您的协助。

Answer 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

将多个变量传递给pug循环

1 个答案: