Book Image

Web Development with Jade

By : Sean Lang
Book Image

Web Development with Jade

By: Sean Lang

Overview of this book

Table of Contents (16 chapters)

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...