TheLazy.Dev
Portfolio GitHub

Blog

pug |cheatsheet |programming

Pug Cheat Sheet

kimanh333

kim

Posted on June 2, 2021

Pug Cheat Sheet

[Mixins] Mixin blocks 

mixin article(title)
  article
    h2.title= title
    block
Enter fullscreen mode Exit fullscreen mode

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

+article('hello there')
  p Content goes here
Enter fullscreen mode Exit fullscreen mode

See: Mixin blocks

[Mixins] Mixin attributes 

mixin pet(name)
  span.pet= name
Enter fullscreen mode Exit fullscreen mode

{: data-line="1"}

+pet('cat')
Enter fullscreen mode Exit fullscreen mode

See: Mixin attributes

[Mixins] Mixins 

mixin list
  ul
    路路路
Enter fullscreen mode Exit fullscreen mode

{: data-line="1"}

+list
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

See: Conditionals

[Pug] Multiline text 

p.
  This is text that doesn't need to
  be prefixed by pipes.
Enter fullscreen mode Exit fullscreen mode

{: data-line="1"}

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

{: data-line="1"}

[Pug] Includes (partials) 

include ./includes/head.pug
Enter fullscreen mode Exit fullscreen mode 
include:markdown article.md
Enter fullscreen mode Exit fullscreen mode

See: Includes

[Pug] Layouts 

//- page.pug
extends layout.pug

block title
  | hello

block content
  | hello
Enter fullscreen mode Exit fullscreen mode 
//- layout.pug
title
  block title
body
  block content
Enter fullscreen mode Exit fullscreen mode

[Pug] Iteration 

ul
  each user in users
    li= user
Enter fullscreen mode Exit fullscreen mode

[Pug] Comments 

// This comment will appear in the HTML
Enter fullscreen mode Exit fullscreen mode 
//- This is a silent comment
Enter fullscreen mode Exit fullscreen mode 
//-
  Nesting inside a comment creates
  a comment block
Enter fullscreen mode Exit fullscreen mode

See: Comments

Reference

馃挅 馃挭 馃檯 馃毄
kimanh333
kim

Posted on June 2, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Pug Cheat Sheet
pug Pug Cheat Sheet

June 2, 2021