Pug is a specific template language that focuses on writing as little syntax as possible. Next to this, it has many powerful features such as conditionals, includes and template inheritance.
It can be difficult at first when coming from just HTML, but trust us that after you wrote some Pug, you might just like it as much as we do.
On this page we will give you a very brief introduction to working with Pug. In this table, on the left you will see some HTML, and on the right the Pug equivalent.
| html | pug |
|---|---|
<p>Lorem ipsum dolor sit amet</p> |
p Lorem ipsum dolor sit amet |
<button id="name">Button text</button> |
button#name Button text |
<button class="c-button">Button text</button> |
button.c-button Button text |
<button id="name" class="c-button">Button text</button> |
button.c-button#name Button text |
For a great pug tutorial, look no further than Learn PugJS with Pugs.
Note that Pug is very sensitive to indentation and correct whitespace. It’s handy to download editorconfig for your favorite editor to keep indentation consistent.
