Pug n’ Roll

It's easy to fall in love with pug.js at first sight - minimal syntax & powerful template inheritance are features everyone can adore 💕 To keep our coats nice and shiny for the future, here's a guide on all the pug basics (not all pug features are mentioned here!)

If you're looking for an in-depth tutorial, check out my past post to learn pug.js with pugs.

If you wanna ride with the pugs right now, codepen is a great place to start! Just select the gear icon in your pen's HTML pane then switch up the HTML preprocessor to pug.

Pugpen of Contents:

Pug & Gulp

var gulp = require ( 'gulp' ), pug = require ( 'gulp-pug' ), cached = require ( 'gulp-cached' ), changed = require ( 'gulp-changed' ), pugInheritance = require ( 'gulp-pug-inheritance' ); gulp.task( 'pug-pages' , function ( ) { return gulp.src([ 'pug/pages/**/*.pug' , '!pug/pages/**/_*.pug' ]) .pipe(changed( './' , { extension : '.html' })) .pipe(cached( 'pug' )) .pipe(pugInheritance({ basedir : 'pug/pages' , skip : 'node_modules' })) .pipe(pug({ locals : {}, pretty : true })) .pipe(gulp.dest( './' )); });

Syntax

doctype html html head meta( name="Pugcupid" content="Wiggle with love" ) body main#page .spotlight h2.title Pugcupid Festival script(src="script.js")

Variables

//- Assignment - var stringVariable = 'String' - var integerVariable = 10 - var arrayVariable = ['Pug', 'Dancer', 'Cake'] - var objectVariable = { name: 'Lancelot' } //- Concatentation - var combinedVariable = 'Pug' + stringVariable

Interpolation

- var title = 'Pug Smootie' - var star = 'Prime Minister Pugadorian' h2= title p #{star} is heading to the US!

Iterations

each value in arrayVariable p= value each value in ['Pug Life', 'Pugspace', 'Pug Blues'] p= value each value, index in ['Pug Riding', 'Pug Aliens'] p= index + ': ' + value while x < 10 p= x x++

Conditionals

if pugLaunch h2 This pug launched into space else if pugBattle h2 This pug is engaged in battle else if !pugBreak h2 Yo you ain't on a pug break, dug else h2 Warning! This pug is jumping through logic!

Mixins

//- Declaration mixin pugQuote blockquote As a pug, I often live the high life. Peeps look at me and think, "Dang brah, I need to beef my badonk like that mafa right there". Shoot they fo jels and that's just the kibble on the bits for me. cite Prince Diggity //- Usage +pugQuote //- Declaration with parameters mixin pugUser(name, age) h2= name if age h3= age //- Usage with parameters +pugUser('Bubbles', 2)

Includes

//- Include another pug file include ./path-to/file.pug //- Include other file types as plain text include styles.css include script.js

Extends & Blocks

//- template.pug block data - var pageTitle = "Pugcupid" html head title= pageTitle body block ribbon block content p Pugs fo life

//- page.pug //- Extends template.pug extends ./path-to/template.pug block data - var pageTitle = "Pudome" block ribbon p New pug jazz block content p This wipes out "Pugs fo life"

Pugspace of Contents:

That's all for now, everyone!