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.
