Question

我有6张卡，可以在一侧显示标题和列表。由于它们都具有相同的结构，因此我正在使用Jade创建一个mixin。因此，由于每张卡显示不同的列表，因此我需要创建不同的变量，每个列表一个。是否有可能，如果可以，如何创建一个可变参数，使我在使用此混入时只能更改最后一个参数来访问所需的变量？喜欢：

我将在列表项中添加6个不同的变量

-var benefitsCard1 = ['benefit 1', 'benefit 2', 'benefit 3, 'benefit 4'];
-var benefitsCard2 = ['benefit 5', 'benefit 6', 'benefit 7, 'benefit 8'];

...

以及在mixin中显示 benefitsCard1 （最后一个参数）的地方，我想更改为创建列表所需的变量名，或者，如果可能的话，创建一个带有空arg的mixin（例如''），以便将此arg命名为我要访问的变量。这可能吗？

mixin benefits(image, h4, p4, benefitsCard1)
  .col-sm-4
    .benefits__card-front
      img(src='img/' + image + '.svg')
      h4
        | #{strings[''+h4]}
      p4
        | #{strings[''+p4]}
    .benefits__card-back
      h4
        | #{strings[''+h4]}
      ul
        each benefit in benefitsCard1
          li
            p1
             | #{strings[''+benefit]}

Answer 1

Pug mixins中的参数的工作方式与JavaScript函数中的工作方式相同-如果将变量作为参数传递，则可以使用参数的名称而不是原始变量的名称来访问该变量的值。

这样，您只需在mixin IsDevelopment()中命名该参数，然后以这种方式访问它即可。

Mixin宣言

benefits

用法

mixin benefitsList(benefits)
  ul
    each benefit in benefits
      li #{benefit}

输出

- var benefits1 = ['one', 'two', 'three']
- var benefits2 = ['four', 'five', 'six']
- var foobar = ['seven', 'eight', 'nine']

+benfitsList(benefits1)
+benfitsList(benefits2)
+benfitsList(foobar)
+benfitsList(['ten', 'eleven', 'twelve'])

希望这会有所帮助。

如何从单个玉混合中调用不同的变量？

1 个答案: