I want to create the following HTML structure
<div class="outerspace">
<div class="inner1"><p>Inner1 content</p></div>
<div class="inner2"><p>Inner2 content</p></div>
<div class="inner3"><p>Inner3 content</p></div>
(...)
</div>
while the number of inner divs may vary.
Example 1:
I could create two mixins - an òuterspace and an ìnner mixin, nest them by using the blockkeyword and place different content for each inner div element:
mixin outerspace()
div.outerspace
block
mixin inner($number)
div(class="inner" + $number)
block
//- call the mixins
+outerspace()
+inner(1)
p Inner1 content
+inner(2)
p Inner3 content
+inner(3)
p Inner3 content
...
Example 2:
This example tries to do the same with a single mixin:
mixin nested_structure($number)
div.outerspace
each item in $number
div(class="inner" + item)
block
//- call the mixin
+nested_structure([1, 2, 3])
p Inner content
This results in the same structure as described above but assigns the same content to each of the generated blocks:
<div class="outerspace">
<div class="inner1"><p>Inner content</p></div>
<div class="inner2"><p>Inner content</p></div>
<div class="inner3"><p>Inner content</p></div>
</div>
Question: How could I use Example 2 to generate the needed HTML structure but assign a different content to each of the inner div elements at the same time?
Can't you just put the "p Inner content" line inside the mixin?
mixin nested_structure($number)
div.outerspace
each item in $number
div(class="inner" + item)
p Inner#{item} content
//- call the mixin
+nested_structure([1, 2, 3])
This will output:
<div class="outerspace">
<div class="inner1"><p>Inner1 content</p></div>
<div class="inner2"><p>Inner2 content</p></div>
<div class="inner3"><p>Inner3 content</p></div>
</div>