ミックスイン

ミックスインは再利用可能な汎用的に使用可能な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>

Pug逆引きリファレンス一覧へ戻る