CODEWITHSUNDEEP
htmliterationpug
epanalepsis
epanalepsis

Reputation: 935

Pug infite element nesting by iteration

I've wondered if there is a way to infinitly nest html elements using a pug iteration. The only thing I thought of was an iteration counter dependent indentation for the markup. But I'm not even sure if this is a possible thing. Does somebody know if there is a way to do that?

Heres a little example for clarification:

The following pug markup

div
  div 
    div
      div
        div

would lead to the following html

<div>
  <div>
    <div>
      <div>
        <div>
        </div>
      </div>
    </div>
  </div>
</div>

That is what I am trying to achieve using an iteration or something in pug to keep the code small, even if we had 10000 elements nested like this.

Best regards

Upvotes: 1

Views: 122

Answers (1)

Sean
Sean

Reputation: 8040

You could use a recursive mixin to nest n number of elements:

mixin nest(n)
  div
    if n-- > 1
      +nest(n)

+nest(10)

This will compile to:

<div>
  <div>
    <div>
      <div>
        <div>
          <div>
            <div>
              <div>
                <div>
                  <div></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions