html - 如何在 Jade 的 mixin 中添加类？

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>

到目前为止，我有这个，但我不知道如何制作它，所以我也可以添加类(“二”、“三”等)

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

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