Creating Dynamic Classes in Jade/Pug

NotoriousWebmaster picture NotoriousWebmaster · Dec 16, 2016 · Viewed 8k times · Source

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.

Answer

TedMeftah picture TedMeftah · Dec 16, 2016

You can do this:

div(class="abc-"+len)

attributes are interrupted automatically, more about attributes