可變元件

可變元件讓你能夠重複使用一個元件但改變其內容，用法很簡單，遞入參數即可

元件

現在我們來做個列表元件，這個元件會將傳入的陣列轉成清單並列出。

//- 名為 list 的元件
mixin list(items)

    //- 樣式
    style(scoped).
        ol > li
        {
            font-size: 14px;
        }

    //- 模板
    ol: each $item in $items
        li=$item

使用方式

使用可變元件的方式和一般的方法沒有很大的差異，我們假設剛才的元件是 component.jade，這個時候只要引用該元件並且呼叫，然後遞入參數即可。

include component

// 元件 1
my-list: +list([1, 2, 3, 4])

// 元件 2
my-list: +list(['A', 'B', 'C', 'D'])

渲染結果如下。

<!-- 元件 1 -->
<my-list>
    <style scoped>
        ol > li
        {
            font-size: 14px;
        }
    </style>
    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ol>
</my-list>

<!-- 元件 2 -->
<my-list>
    <style scoped>
        ol > li
        {
            font-size: 14px;
        }
    </style>
    <ol>
        <li>A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
    </ol>
</my-list>