ミックスイン

ミックスインは再利用可能な汎用的に使用可能なHTMLのまとまりです。

基本的な使い方

Pugでミックスインを使用するには、定義をmixinを使用し、定義したミックスインを+ミックスイン名で使用します。

定義

mixin ミックスイン名
タグなど

使用

+ミックスイン名

Pug

mixin foo-list
	ul
		li Apple
		li Orange
		li Banana

+foo-list

コンパイル後

<ul>
	<li>Apple</li>
	<li>Orange</li>
	<li>Banana</li>
</ul>

ミックスインは引数を指定することができ、定義をmixin ミックスイン(引数)を使用し、定義したミックスインを+ミックスイン名(引数)で使用します。
引数はカンマ区切りで複数指定することができます。

定義

mixin ミックスイン名(引数)
	タグなど

定義：複数

mixin ミックスイン名(引数. 引数, 引数)
	タグなど

使用

+ミックスイン名(引数)

使用：複数

+ミックスイン名(引数, 引数, 引数)

Pug

mixin foo-list(items)
	ul
		each item in items
			li=item

+foo-list(['Apple', 'Orange', 'Banana'])

コンパイル後

<ul>
	<li>Apple</li>
	<li>Orange</li>
	<li>Banana</li>
</ul>

定義したmixin内にblockを使用することで、+ミックスイン名の次の行に続くコンテンツをmixin内に引き渡すことができます。

Pug

mixin foo-list
	ul
		li Apple
		li Orange
		li Banana
		block

+foo-list
	li strawberry
	li pineapple

コンパイル後

<ul>
	<li>Apple</li>
	<li>Orange</li>
	<li>Banana</li>
	<li>strawberry</li>
	<li>pineapple</li>
</ul>

定義したmixin内に&attributes.属性名、タグの属性を付与するのと同様に+ミックスイン名(属性=属性値)と使用することで属性を与えることができます。

Pug

mixin foo-list
	ul(class=attributes.parentClass)
		li Apple
		li Orange
		li Banana

+foo-list(parentClass="foo" itemClass="baz")

コンパイル後

<ul class="foo">
	<li class="baz">Apple</li>
	<li class="baz">Orange</li>
	<li class="baz">Banana</li>
</ul>