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>

到目前为止，我有这个但我无法弄清楚如何制作它，所以我也可以添加课程（＆＃39;两个＆＃39;三个＆＃39;等）

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

Answer 1

你可以在玉器中使用以下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

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

1 个答案: