Pug Cheat Sheet

[Mixins] Mixin blocks

mixin article(title)
  article
    h2.title= title
    block

{: data-line="1,4"}

+article('hello there')
  p Content goes here

See: Mixin blocks

[Mixins] Mixin attributes

mixin pet(name)
  span.pet= name

{: data-line="1"}

+pet('cat')

See: Mixin attributes

[Mixins] Mixins

mixin list
  ul
    ···

{: data-line="1"}

+list

Mixins allow you to create reusable code blocks.
See: Mixins

Mixins

{: .-three-column}

[Pug] Conditionals

if authenticated
  a(href='/logout') Sign out
else
  a(href='/login') Sign in

{: data-line="1,3"}

See: Conditionals

[Pug] Multiline text

p.
  This is text that doesn't need to
  be prefixed by pipes.

{: data-line="1"}

script.
  // It's great for raw
  // JavaScript and stuff
  alert('hello')

{: data-line="1"}

[Pug] Includes (partials)

include ./includes/head.pug

include:markdown article.md

See: Includes

[Pug] Layouts

//- page.pug
extends layout.pug

block title
  | hello

block content
  | hello

//- layout.pug
title
  block title
body
  block content

[Pug] Iteration

ul
  each user in users
    li= user

[Pug] Comments

// This comment will appear in the HTML

//- This is a silent comment

//-
  Nesting inside a comment creates
  a comment block

See: Comments

Reference

• Pug Cheat Sheet - Cheat Sheet Maker