How can I create a re-usable piece of markup in Jade

Question

What I'm trying to accomplish.

What I'm trying to do is actually really simple and the Jade template engine should be able to help me out quite a bit with it, but I'm running into some snags.

I'm building a site that uses a lot of semi-transparent elements like the one in this jsFiddle: http://jsfiddle.net/Chevex/UfKnM/
In order to make the container background be semi-transparent but keep the text opaque this involves 3 elements:

• A container DIV with position: relative
• A child DIV with position: absolute, a background color, height/width set to 100%, and its opacity set to the desired level.
• Another child DIV for the content with no special positioning.

It's pretty simple and I use it fairly effectively on CodeTunnel.com.

How I want to simplify it.

I'm re-writing CodeTunnel.com in node.js and the Jade template engine seems like it could greatly simplify this piece of markup that I re-use over and over again. Jade mixins look promising so here's what I did:

1. I defined a mixin so I could just use it wherever I need it.

   mixin container
       .container(id=attributes.id) // attributes is an implicit argument that contains any attributes passed in.
           .translucentFrame
           .contentFrame
               block // block is an implicit argument that contains all content from the block passed into the mixin.
   

2. Use the mixin, passing in a block of content:

   +container#myContainer
       h1 Some test content
   

   Generates:

   <div id="myContainer" class="container">
       <div class="translucentFrame"></div>
       <div class="contentFrame">
           <h1>Some test content</h1>
       </div>
   </div>
   

So far everything works great! There is just one problem. I want to use this mixin in a layout.jade template and I want the child template to be able to use block inheritance. My layout.jade file looks like this:

doctype 5
mixin container
    .container(id=attributes.id)
        .translucentFrame
        .contentFrame
            block
html
    head
        title Container mixin text
    body
        +container#bodyContent
            block bodyContent

Then in another jade file (index.jade) I extend layout.jade:

extends layout

block bodyContent
    h1 Some test Content

Everything looks to be in order but the jade parser fails:

I assume it has something to do with the block keyword conflicting. Inside a mixin block is an implicit argument containing the block passed into the mixin, but when extending a jade template block is a keyword that identifies a block of markup that is to be substituted in the equivalent block in the parent template.

If I replace the block bodyContent that I'm passing into the mixin with any other markup then everything works fine. It's only when I try to pass in a block definition that it gets upset.

Any ideas?

Answer 1

I'd suspect that, because mixins define their own functions, the block bodyContent is being defined in different scope inaccessible from index.jade.

What you can try instead is to move the use of the mixin to the inheriting view since mixins are "hoisted":

layout.jade:

doctype 5

mixin container
    .container(id=attributes.id)
        .translucentFrame
        .contentFrame
            block

html
    head
        title Container mixin text
    body
        block bodyContent

index.jade:

extends layout

block bodyContent
    +container#myContainer
        h1 Some test content