Allan Allan - 4 months ago 47
Jade Question

How to add class in mixin in Jade?

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

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