A Second Train of Thought

Jade & Stylus 0.16.0 released

Jade 0.16.0

This release of Jade adds quite a few new features such block support for include, and template inheritance!

Extended grammar

Jade currently allows you to use JavaScript all over the place, rather than restricting a subset, or implement its own grammar. While this is flexible it tends to make templates look less like … templates! In an effort to make Jade more declarative I’ve added literal support for if, unless, while, until, iteration, assignments and others.

For example I consider it bad practice to define vars in a template, however if you must, you may have previously done something like this:

  - var items = ['foo', 'bar', 'baz']

Jade now allows for assignment, where the right-hand operand is still a regular javascript expression:

   items = ['foo', 'bar', 'baz']

As mentioned if and unless and friends are supported, so the following:

 - if (!(foo && bar))
   p stuff

May now be defined as:

  unless foo && bar
    p stuff

This rule applies to else[ if] as well:

  if something
    p foo
  else if somethingElse
    p bar
  else
    p baz

And finally iteration where each and for are interchangeable:

 - items.forEach(function(item){
   li= item
 - }) 

each item in items
  li= item

for item in items
  li= item

each item, i in items
  li #{i}: #{item}

each val, key in obj
  li #{key}: #{val}

Include blocks

The include directive now supports blocks, so for example one could have head.jade defined as the following:

  head
    script(src='/javascripts/jquery.js')

Allowing you to either include the file as-is:

  html
    include head
    body
      h1 Title

or append to the last block defined, adding additional script tags:

  html
    include head
      script(src='/javascripts/caustic.js')
      script(src='/javascripts/app.js')
    body
      h1 Title

Template inheritance

Jade now supports template inheritance via the block and extends keywords. A block is simply a “block” (indented) of Jade that may be replaced within a child template, this process is recursive.

Jade blocks can provide default content if desired, however optional as shown below by block scripts, block content, and block foot.

// layout.jade
html
  head
    h1 My Site - #{title}
    block scripts
      script(src='/jquery.js')
  body
    block content
    block foot
      #footer
        p some footer content

Now to extend the layout, simply create a new file and use the extends directive as shown below, giving the path (with or without the .jade extension). You may now define one or more blocks that will override the parent block content, note that here the foot block is not redefined and will output “some footer content”.

// index.jade
extends layout

block scripts
  script(src='/jquery.js')
  script(src='/pets.js')

block content
  h1= title
  each pet in pets
    include pet

It’s also possible to override a block to provide additional blocks, as shown in the following example where content now exposes a sidebar and primary block for overriding, or the child template could override content all together.

// funky-layout.jade
extends layout

block content
  .sidebar
    block sidebar
      p nothing
  .primary
    block primary
      p nothing

For the rest of the changes and bug fixes check out the changelog.

Stylus 0.16.0

Fewer changes than the latest Jade however still some good ones!

:= operator

This new operator is an alias of ?= operator, because I think ?= is difficult to read in large quantities for configuration etc:

grid-columns ?= 16
grid-column-width ?= 40px
grid-gutter-width ?= 20px
extra-space ?= 40px

grid-columns := 16
grid-column-width := 40px
grid-gutter-width := 20px
extra-space := 40px

Adjusting color lightness

While the lighten(color, amount) and darken(color, amount) BIFs are still available, the + and - operators now provide the same functionality when used with percentages as illustrated below:

  lighten(black, 50%)
  // => #808080

  black + 50%
  // => #808080

fade-in() & fade-out() BIFs

These small built-in functions are defined in stylus as the following to adjust the opacity:

  // decerase opacity by amount

  fade-out(color, amount)
    color - rgba(black, amount)

  // increase opacity by amount

  fade-in(color, amount)
    color + rgba(black, amount)

For example:

fade-out(#eee, .5)
// => rgba(238,238,238,0.50);

fade-out(fade-out(#eee, .3), .5)
// => rgba(238,238,238,0.20);

Check out the changelog for the other bugfixes and additions.

See, that’s what the app is perfect for.

More you might like

“Pumpkin spice condoms for the white bitches.”