Once we start leveraging Pug and CSS together like this, it opens up a bunch of possibilities. Let's refactor that! ? pug Copy mixin flower. Here's a styled up flower.Ĭheck out this pen by Jhey ( on CodePen. You can use JavaScript template literals for inline styles to generate dynamic demos ? An example - Randomly generated flowers ? card_badge User of the month! html Copy Stu User of the month! Hot tip! ? card_title = name if block block +card ( 'Stu', '' ). If you want a mixin but need different nested markup for certain cases, then a mixin block will work. Notice how we can also provide default values for those params! ? card_title = name +card ( 'Geoff', '' ) +card ( 'Jack' ) html Copy Geoff Jack That's cool but mixins that accept params will be more useful ? pug Copy mixin card (name, avatar = '. pug Copy mixin socials li a ( href = '' ) Check out some articles! li a ( href = '' ) Check out some code! footer ul +socials html Copy Check out some articles! Check out some code! When we find repeating patterns in our markup, it could be time for a mixin! They're reusable blocks of Pug that can either be static, accept params, or take blocks.
#PUG TEMPLATE CONDITIONAL CODE#
toUpperCase ( ) html Copy SUN MON TUE WED THU FRI SAT pug Copy - let b = 0 while b Īs with conditionals, we could use Unbuffered code to achieve the same results ? Mixins Two main operators for iteration in Pug are each and while. Alternatively, we could use Unbuffered code to achieve the same result ? pug Copy - const balance = 100 if balance >= 50 span Nice! else if balance >= 0 span Cool else span Uh oh! html Copy Nice! Iteration Pug provides conditional operators that feel familiar to those we use elsewhere. number = ` Random number is $ ! ` html Copy Hey Geoff! Conditionals Buffered - Code prefixed with = is evaluated and output is included.Unbuffered - Code prefixed with - is not included in the output.You can use valid JavaScript within Pug templates. pug Copy //- layout.pug html head title Some awesome site! body include menu.pug main block content pug Copy //- menu.pug nav ul li a ( href = "/" ) Home li a ( href = "/about" ) About html Copy Some awesome site! Home About Inline code ? To stop our pug files from growing out of control, we can split them into separate files and include them.Ĭonsider a layout where we "include" a menu section of markup. Giving us html Copy Awesome site Welcome to an awesome site! Includes pug Copy //- layout.pug html head title Awesome site body block content pug Copy //- home.pug extends layout.pug block content h1 Welcome to my awesome site! The common example is a layout extension. Pug supports template inheritance via extends and blocks. if ( isAwesome (pug ) ) return "Hell yeah!" Inheritance via extends and blocks If you need to include plain text within an element, suffix with. You can write comments with //(included in output) and //-(not included in output). If we wanted a div with the class flower, we only need pug Copy. Define attributes optionally comma-separated within the brackets.If no tag is defined, pug defaults to div Text at the start of a line with no special character prefix is treated as a tag.It uses an indent sensitive syntax allowing you to write clean markup with less code ?įor those in camp TL DR, scroll down for demos! ? Jumping in ? Īn element follows this structure pug Copy input #check. A template engine for node and browser environments.