puginterpolationdynamic-class-creation

Creating Dynamic Classes in Jade/Pug

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.

Solution

  • You can do this:

    div(class="abc-"+len)

    attributes are interrupted automatically, more about attributes