DEV Community

kim
kim

Posted on

Pug Cheat Sheet

#pug #cheatsheet #programming

[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

Top comments (0)

Read next

witcher_1001 profile image

10 Essential Lombok Annotations Every Java Developer Needs to Master!

The Witcher -

prince_beec5ccde00b7c6c73 profile image

3d Image carousel rotation illusion using html css and javascript

Prince -

mdarifulhaque profile image

2641. Cousins in Binary Tree II

MD ARIFUL HAQUE -

daviducolo profile image

A Comprehensive Guide to Multithreading in Ruby

Davide Santangelo -