5

次の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ìnnermixin) を作成し、キーワードを使用してそれらをネストし、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 要素のそれぞれに異なるコンテンツを割り当てるにはどうすればよいですか?

4

1 に答える 1