如何在Jade中的mixin中添加class？

Question

我想制作一个Jade mixin，它会输出类似这样的内容

<div class="progress__graph">
    <div class="progress__bar two">
        <p>Web Design 80%</p>
    </div>
</div>
<div class="progress__graph">
    <div class="progress__bar three">
        <p>Web Design 80% </p>
    </div>
</div>

到目前为止，我已经做到了这一点，但是我无法弄清楚如何使其能够添加类（例如 'two'、'three' 等）。

mixin progress(text)
    .progress__graph
        .progress__bar
            p #{text}

- Person

Answer 1

你可以在Jade中使用以下mixin:

mixin progress(text, className)
  .progress__graph
    .progress__bar(class=className)
       p #{text}

+progress('Text goes here', 'one')
+progress('More text here', 'two')

这将呈现以下HTML：

<div class="progress__graph">
  <div class="progress__bar one">
    <p>Text goes here</p>
  </div>
</div>
<div class="progress__graph">
  <div class="progress__bar two">
    <p>More text here</p>
  </div>
</div>

希望这有所帮助。您可以在此处查看示例 - http://codepen.io/AdamCCFC/pen/dXdWXy

- adamccfc

---

我建议使用发音为“and attributes”的写法，&attributes语法可以将一个对象展开为元素的属性。就像这里描述的那样：http://jade-lang.com/reference/attributes/#and-attributes。如果您需要多个属性，这会使事情变得更加容易。这是一个基于您的示例的示例：http://codepen.io/pure180/pen/AXyqBX - Daniel

是的，很酷，我之前不知道这个，你帮助我学到了新东西。干得好。 - adamccfc