variable in class name jade

Question

I can't set a variable name in a class in jade:

.flag_#{ session.locale } #{ session.locale }

I have:

<div class="flag_" >en</div>

And I'd like to have

<div class="flag_en" >en</div>

Thanks

score 78 · Accepted Answer · answered Dec 02 '12 at 12:24

78

Try this (have not tested):

div(class="flag_#{ session.locale }") session.locale

answered Dec 02 '12 at 12:24

karaxuna

26,752
13
82
117

1

Note that this also works if you have classes already in the Jade, like so: `.flag(class="flag_#{session.locale}") session.locale` => `
en_GB
` – Wolfgang Oct 15 '15 at 16:59
Worked like a charm – onemesh Nov 05 '16 at 20:10

score 16 · Answer 2 · answered Apr 19 '16 at 14:19

16

As for pug@2.0.0-alpha3 works this way:

div(class="flag_" + session.locale) session.locale

answered Apr 19 '16 at 14:19

Pablo Armentano

583
7
13

1

check the version you are using - @karaxuna's solution doesn't work anymore on pug – miro Aug 08 '16 at 21:54

score 3 · Answer 3 · answered Jun 13 '15 at 20:47

Here's another approach:

mixin formButton(text, type, extra_classes)
    - var default_classes = 'btn btn-primary'
    if extra_classes
        - var classes = default_classes + ' ' + extra_classes
    else
        - var classes = default_classes

    if type
        button(class=classes type=type) !{text}
    else
        button(class=classes type="submit") !{text}

Example 1:

Usage:

+formButton('Text')

Result:

<button type="text" class="btn btn-primary" type="submit">Text</button>

Example 2:

Usage:

+formButton('Text', 'button')

Result:

<button type="text" class="btn btn-primary" type="button">Text</button>

Example 3:

Usage:

+formButton('Text', 'button', 'extra-class')

Result:

<button type="text" class="btn btn-primary extra-class" type="button">Text</button>

score 2 · Answer 4 · answered Apr 18 '15 at 03:06

2

You can also use conditional statements to do this like

  if liked == true
    span.like.active
  else
    span.like

answered Apr 18 '15 at 03:06

dotslashlu

3,361
4
29
56

Matias Kinnunen · Answer 5 · 2021-01-21T20:44:10.817

You can also use a template literal:

- const session = { locale: 'en' }
div(class=`flag_${session.locale}`) #{session.locale}

//- Just to show more options:

div(class=`flag_${session.locale}`)= session.locale
div(class=`flag_${session.locale}`) Current language is #{session.locale}
div(class=`flag_${session.locale}`)= `Current language is ${session.locale}`

Output (using Pug 2.0.4):

<div class="flag_en">en</div>
<div class="flag_en">en</div>
<div class="flag_en">Current language is en</div>
<div class="flag_en">Current language is en</div>

variable in class name jade

5 Answers5

Linked