DEV Community

Giulia Chiola
Giulia Chiola

Posted on • Originally published at giuliachiola.dev

Add multiple classes in pug

#pug #templatengine

Pug, formerly known as Jade, is a template engine thas uses a JavaScript render. Sometimes we have to add a class conditionally based on a variable, here I go with some tricky solutions I found.

One condition to check

The easiest way to check a class in pug is using the ternary operator

- var cond1 = true
.c-component(class=cond1 ? 'cond1-TRUE' : 'cond1-FALSE' )
Enter fullscreen mode Exit fullscreen mode

HTML output

<div class="c-component cond1-true"></div>
Enter fullscreen mode Exit fullscreen mode

But there are other two ways to write the same exact condition in pug:

- var cond1 = true

//- (1)
.c-component(class={'cond1-true': cond1 === true})

//- (2)
.c-component(class={cond1True: cond1 === true})
Enter fullscreen mode Exit fullscreen mode

Important

🧨 !important
(1) kebab-case class cond1-true must be wrapped in quotes
(2) camelCase class cond1True can skip wrapper quotes

HTML output

<div class="c-component cond1-true"></div>
<div class="c-component cond1True"></div>
Enter fullscreen mode Exit fullscreen mode

More than one condition to check

If we have to check two condintions, we can go also in this case with the ternary operator to choose which classes we want.

We can write the conditionals in three ways:

  1. using two class attributes separated by space 
(class=cond1 ? 'cond1-TRUE' : 'cond1-FALSE' class=cond2 ? 'cond2-TRUE' : 'cond2-FALSE')
Enter fullscreen mode Exit fullscreen mode
  1. using two class attributes separated by comma 
(class=cond1 ? 'cond1-TRUE' : 'cond1-FALSE', class=cond2 ? 'cond2-TRUE' : 'cond2-FALSE')
Enter fullscreen mode Exit fullscreen mode
  1. using two class attributes, one for each parentesis 
(class=cond1 ? 'cond1-TRUE' : 'cond1-FALSE')(class=cond2 ? 'cond2-TRUE' : 'cond2-FALSE')
Enter fullscreen mode Exit fullscreen mode

All three:

pug

- var cond1 = true
- var cond2 = false

.c-component(class=cond1 ? 'cond1-TRUE' : 'cond1-FALSE' class=cond2 ? 'cond2-TRUE' : 'cond2-FALSE')

.c-component(class=cond1 ? 'cond1-TRUE' : 'cond1-FALSE', class=cond2 ? 'cond2-TRUE' : 'cond2-FALSE')

.c-component(class=cond1 ? 'cond1-TRUE' : 'cond1-FALSE')(class=cond2 ? 'cond2-TRUE' : 'cond2-FALSE')
Enter fullscreen mode Exit fullscreen mode

HTML output

<div class="c-component cond1-TRUE cond2-FALSE"></div>

<div class="c-component cond1-TRUE cond2-FALSE"></div>

<div class="c-component cond1-TRUE cond2-FALSE"></div>
Enter fullscreen mode Exit fullscreen mode

If we have a ternary option with the second operand empty, we could simplify the pug syntax:

- var cond1 = true
- var cond2 = false

.c-component(class=cond1 && 'cond1-TRUE' class=cond2 && 'cond2-TRUE')
//- or more explicit
.c-component(class=cond1 ? 'cond1-TRUE' : '' class=cond2 ? 'cond2-TRUE' : '')
Enter fullscreen mode Exit fullscreen mode

HTML output

<div class="c-component cond1-TRUE"></div>
Enter fullscreen mode Exit fullscreen mode

🖥 Codepen example.

📚 More info

Top comments (0)

Read next

varzoeaa profile image

Laravel VS Symfony: The PHP Framework Showdown

varzoeaa -

seyilufadejucyberservices profile image

Create a linux VM on Azure and Connect using a Public Key

Seyi Lufadeju -

faizanfirdousi profile image

Day 1 of #100DaysOfJavaBackend

Faizan Firdousi -

andrewkangg profile image

Zero-Downtime Blue-Green Deployment with a Simple 'git pull & bash run.sh' Command

Andrew Kang-G -