Mixins | Web Development with Jade

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

Tech Concepts

Programming languages

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Web Development with Jade

By : Sean Lang

Web Development with Jade

By: Sean Lang

Overview of this book

Syntax and mechanics

Defining mixins

Calling mixins

Web Development with Jade

By : Sean Lang

Web Development with Jade

By: Sean Lang

Overview of this book

Syntax and mechanics

Defining mixins

Calling mixins

Confirmation

Buy this book with your credits?

Submit Your Feedback

Create a Free Account To Continue Reading

Sign in to activate your 7-day free access