cheatsheets/pug.md

title	category	layout	prism_languages	updated	weight
Pug	JavaScript libraries	2017/sheet	jade	2017-08-30	-3

Pug

{: .-three-column}

Basic document

doctype html
html(lang='en')
  - javascript()
  h1.class#id(name='hi')
    | Text. Hello there,
    = name

  if showControls
    button.red Edit this page

Comments

// This comment will appear in the HTML

-// This is a silent comment

Iteration

ul
  each user in users
    li= user

Layouts

-// page.pug
extends layout.pug

block title
  | hello

block content
  | hello

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

Includes (partials)

include ./includes/head.pug

include:markdown article.md

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"}

Mixins

{: .-three-column}

Mixins

mixin list
  ul
    ···

+list

Mixin with arguments

mixin pet(name)
  span.pet= name

+pet('cat')

Mixin with content

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

{: data-line="4"}

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