Creating Dynamic Classes in Jade/Pug

Question

I'm trying to add a dynamic class to a jade template. Like so:

- var obj = {a: 1, b: 2, c: 3};
- var len = Object.keys(obj).length;

.abc-#{len}

But the compiler is taking exception to this:

  > 4| .abc-#{len}
------------^

Unexpected token `interpolation` expected `text`, `interpolated-code`, `code`, `:`, `slash`, `newline` or `eos`

I've tried everything I could think of. Been scouring https://pugjs.org/language/interpolation.html. Could really use a hand.

Thanks.

Cristincristina

Answer 1

You can do this:

div(class="abc-"+len)

attributes are interrupted automatically, more about attributes

Antilepton

The class value can also be an array: div(class=['foo', 'bar', 'baz'] – Overfill

Answer 2

You can use ES6 template literals as well. E.g.

div(class=`static_${dynamic_variable}` 

In your case:

div(class=`abc-${len}`)

Have fun.

Bunnybunow