The power of Jade mixins

Get DRY and let Jade do the heavy lifting 💪

If you’re unfamiliar with Jade, it is a template engine for writing HTML mark up. It has many powerful features that make for smaller, more comprehensible code. To me, it is awesome.

I’ve written an intro to Jade previously detailing why I think so. You can read that here.

Today, I am going to discuss Jade mixins.

Mixins are like functions that allow you to define markup blocks to be output when invoked. It helps adhere to the DRY principle.

For example, this is a basic mixin that creates a contact block for a site

mixin contact
  .contact
    h2 Contact Me
      ul
        li me@me.com
        li me@home.com

Then, wherever we need that contact block, we just use the mixin as follows

header
  nav
    ul
      li Home
  +contact

This isn’t a useful mixin though and for static content like this, you could just as easily use includes and separate your layout blocks into separate files which makes for a better repo structure.

However, you can create more powerful mixins when you start introducing looping, conditionals and parameter variables.

For example, let’s say we are creating markup for a carousel component that displays… animals.

.carousel
  .panel
    .image
      img(src="img/cat.png")
    h2 Cat
  .panel
    .image
      img(src="img/dog.png")
    h2 Dog

In this case we could create a mixin for a carousel panel

mixin carouselPanel(name, imageUrl)
  .panel
    .image
      img(src="#{imageUrl}")
    h2= name

And use it in our carousel markup as follows

.carousel
  +carouselPanel('Cat', 'img/cat.png')
  +carouselPanel('Dog', 'img/dog.png')

The use of a mixin here has saved us writing some code and makes our source even more comprehensible than HTML.

This is a simple example. But, you can imagine how when used in complex projects where UI components require more complex markup, mixins can be helpful.

More complex examples may include the use of conditionals and loops.

mixin group(title, highlighted, disabled)
  if highlighted
    .group.highlighted(is-disabled=”#{disabled}”)= title
      block
  else
    .group(is-disabled=”#{disabled}”)= title
      block
+group(“First”, true, false)
  .content Here is some content
+group(“Second”, false, true)

mixin createTable(numberOfRows)
  — var n = 0; 
  table
    tr
      th Number
    while n < numberOfRows
      tr
        td= n++
+createTable(3)

These are still basic examples but should show you some more possibilities for your Jade source. You could imagine the first example being used for something like accordion panels and the second for when you want to create variable amounts of an element.

UPDATE 31/09: Or how about this example I came up with yesterday to create the github buttons in your markup

mixin githubStats(userName, repoName)
  .row
    .col-md-12
      iframe(src = "http://ghbtns.com/github-btn.html?user=#{userName}&repo=#{repoName}&type=watch&count=true", allowtransparency="true", frameborder="0", scrolling="0", width="90px", height="20")
      iframe(src = "http://ghbtns.com/github-btn.html?user=#{userName}&repo=#{repoName}&type=fork&count=true", allowtransparency="true", frameborder="0", scrolling="0", width="90px", height="20")
      iframe(src = "http://ghbtns.com/github-btn.html?user=#{userName}&repo=#{repoName}&type=follow&count=true", allowtransparency="true", frameborder="0", scrolling="0", width="120px", height="20")
footer
  +githubStats('jh3y', 'whirl')

And that’s mixins in Jade, a quite powerful feature that can be sometimes overlooked much like the Jade language itself.

As always if you have any questions or suggestions, feel free to leave a note or tweet me.