pug.md

   1 ---
   2 title: Pug
   3 category: JavaScript libraries
   4 layout: 2017/sheet
   5 prism_languages: [jade]
   6 updated: 2017-10-30
   7 weight: -3
   8 tags: [Featurable]
   9 ---
  10
  11 ## Pug
  12 {: .-three-column}
  13
  14 ### Basic document
  15 {: .-prime}
  16
  17 ```jade
  18 doctype html
  19 html(lang='en')
  20   h1.class#id(name='hi')
  21     | This is some text, hello there,
  22     = name
  23
  24   - javascript()
  25 ```
  26
  27 ### Elements
  28
  29 ```jade
  30 div
  31   | Just a div
  32 ```
  33
  34 ```jade
  35 .search
  36   | A div, with class 'search'
  37 ```
  38
  39 ```jade
  40 h1 A heading with text
  41 ```
  42
  43 ```jade
  44 h1= page.title
  45 ```
  46
  47 ```jade
  48 div.class
  49 div.class1.class2
  50 h1.header
  51 ```
  52
  53 ### Attributes
  54
  55 ```jade
  56 input(type='text' name='q' autofocus)
  57 ```
  58
  59 ```jade
  60 - var authenticated = true
  61 body(class=authenticated ? 'authed' : 'anon')
  62 ```
  63
  64 See: [Attributes](https://pugjs.org/language/attributes.html)
  65
  66 ### Comments
  67
  68 ```jade
  69 // This comment will appear in the HTML
  70 ```
  71
  72 ```jade
  73 //- This is a silent comment
  74 ```
  75
  76 ```jade
  77 //-
  78   Nesting inside a comment creates
  79   a comment block
  80 ```
  81
  82 See: [Comments](https://pugjs.org/language/attributes.html)
  83
  84 ### Iteration
  85
  86 ```jade
  87 ul
  88   each user in users
  89     li= user
  90 ```
  91
  92 ### Layouts
  93
  94 ```jade
  95 //- page.pug
  96 extends layout.pug
  97
  98 block title
  99   | hello
 100
 101 block content
 102   | hello
 103 ```
 104
 105 ```jade
 106 //- layout.pug
 107 title
 108   block title
 109 body
 110   block content
 111 ```
 112
 113 ### Includes (partials)
 114
 115 ```jade
 116 include ./includes/head.pug
 117 ```
 118
 119 ```jade
 120 include:markdown article.md
 121 ```
 122
 123 See: [Includes](https://pugjs.org/language/includes.html)
 124
 125 ### Multiline text
 126
 127 ```jade
 128 p.
 129   This is text that doesn't need to
 130   be prefixed by pipes.
 131 ```
 132 {: data-line="1"}
 133
 134 ```jade
 135 script.
 136   // It's great for raw
 137   // JavaScript and stuff
 138   alert('hello')
 139 ```
 140 {: data-line="1"}
 141
 142 ### Conditionals
 143
 144 ```jade
 145 if authenticated
 146   a(href='/logout') Sign out
 147 else
 148   a(href='/login') Sign in
 149 ```
 150 {: data-line="1,3"}
 151
 152 See: [Conditionals](https://pugjs.org/language/conditionals.html)
 153
 154 ## Mixins
 155 {: .-three-column}
 156
 157 ### Mixins
 158
 159 ```jade
 160 mixin list
 161   ul
 162     ···
 163 ```
 164 {: data-line="1"}
 165
 166 ```jade
 167 +list
 168 ```
 169
 170 Mixins allow you to create reusable code blocks.
 171 See: [Mixins](https://pugjs.org/language/mixins.html)
 172
 173 ### Mixin attributes
 174
 175 ```jade
 176 mixin pet(name)
 177   span.pet= name
 178 ```
 179 {: data-line="1"}
 180
 181 ```jade
 182 +pet('cat')
 183 ```
 184
 185 See: [Mixin attributes](https://pugjs.org/language/mixins.html#mixin-attributes)
 186
 187 ### Mixin blocks
 188
 189 ```jade
 190 mixin article(title)
 191   article
 192     h2.title= title
 193     block
 194 ```
 195 {: data-line="1,4"}
 196
 197 ```jade
 198 +article('hello there')
 199   p Content goes here
 200 ```
 201
 202 See: [Mixin blocks](https://pugjs.org/language/mixins.html#mixin-blocks)