Pug (ex. Jade) cheatsheet

pug-jade.md

Jade cheatsheet

doctype html
    body
        p inline text

        //- nesting + inline nesting
        .content
            .content__elem: span

        p                       
            //- pipe
            | raw text #[span hello] text
            | raw html <tag></tag>

        //- text block
        p.
            Raw text
            Raw text

//  comment => .html
//- private (unbuffered) comment
//-
    multiline
    comment

Variables

- var name = "abc"

div
    h1
        | Unescaped: 
        != name.toUpperCase()

    ul
      - for (var i=10; i--;)
        li= i                        

Attributes

- v1 = 5
- v2 = true
span(data-value = v1 == 5 ? 'ok':'no' disabled=v2)

//- only for style & class
a(style={color: 'red'}, class={visible: true})

//- multiple class definitions
a(class={active: currentUrl === '/'} class="c2" class=['c1', 'c2'] href="/") Home

Mixins

mixin m1(name)
    div= name

+m1('test')

//- inline nested
div: +m1

mixin m2(name)
    //- attach attributes
    +m1(name)&attributes(attributes)
+m2('test')(class="c1" data-custom="test")

mixin ul(...items)
    ul
        each li in items
            li(class=li)
+ul('one','two','three')

Includes / inheritance

include ./header
style
    include styles.css

//- layout.pug
.content__wrap
    block CONTENT

//- page.pug
extends layout
block CONTENT
    .content

//- filter
include:markdown article.md

Conditionals

mixin m1(size)
    case size
        when 'large': -size = 'btn-lg'
        when 'small': -size = 'btn-sm'
        when 'mini':  -size = 'btn-xs'

    div(data-size=size)
    
+m1('small')

mixin m2
    - var a = attributes
    -
        switch(a.effect) {
            case "translate": a.effect = "slide"; break;
            case "stretch": a.effect = "relax"; break;
        }

    .test(data-effect=a.effect)
        block

+m2(effect="stretch")
    | Test