次のHTML構造を作成したい
<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>
インナーの数はdivs
異なる場合があります。
例 1:
2 つの mixin (anòuterspace
とìnner
mixin) を作成し、キーワードを使用してそれらをネストし、block
内側の div 要素ごとに異なるコンテンツを配置できます。
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
...
例 2:
この例では、単一の 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
これにより、上記と同じ構造になりますが、生成された各ブロックに同じコンテンツが割り当てられます。
<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>
質問:例 2を使用して必要な HTML 構造を生成し、同時に内部の div 要素のそれぞれに異なるコンテンツを割り当てるにはどうすればよいですか?