Syntax and mechanics
First off, we're going to talk about how to write mixins: the syntax that they use, and what it does. Also, since we've already covered logical operations in templates, we can use those in mixins throughout the examples.
Defining mixins
Mixin definitions don't output any HTML and are defined using the following syntax:
mixin book(name, price) li #{name} for #{price} €
In the preceding code snippet, book
is the name of the mixin, and name
and price
are both named arguments. The indented block of Jade gets executed in its own scope, where the variables name
and price
are both defined with the arguments that are passed. So basically, it works just like you would expect a function to work.
Calling mixins
The syntax for calling mixins is also similar to that of function calls, except we prefix the function name with a +
symbol to say that it isn't a tag (which can look quite similar). So using our book
mixin, we can call it with the following:
Jade |
HTML |
---|---|
ul#books +book("Book... |