How to add class in mixin in Jade?

Question

I want to make Jade mixin which will output something like this

<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>

So far I have this but I can't figure out how to make it so I can add classes as well ( 'two', 'three' etc)

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

Answer 1

You can use the following mixin in jade:

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

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

Which will render the following 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>

Hope that helps. You can see an example of this here - http://codepen.io/AdamCCFC/pen/dXdWXy