Search code examples
pug

Using variables inside of alignment attribute

I am using pug 2.

I have created a template.pug, and within that template, it is broken down to sub-a.pug and sub-b.pug. When they are on sub-a.pug the variable is defined as - var alignment_text = "center";. In sub-b.pug the variable is defined as - var alignment_test = "center";

On either sub-a.pug or sub-b.pug, there is a content.pug file. On this file I try and use it like:

<div align="#{alignment_text}"></div>

When I try this it displays #{alignment_text} instead of left or right.

To resolve this I do:

if alignment_text = "center"
  <div align="center"</div>
else 
  <div align="center"</div>

Is there a way so that I can use the variables in quotes for alignment, id's or classes?

Solution

  • According to the Pug documentation, that syntax for attribute interpolation is old and no longer supported. The documentation provides an alternative syntax for current versions of Pug:

    - var alignment_text = 'center'

// this is no longer supported
table(align='#{alignment_text}')

// use this syntax instead
table(align= alignment_text)