mixiin機能は似た機能をまとめるときに便利なスクリプトです。
実際のところ
引数なし
とくに引数があるわけではない場合、こちら。
カード表示系のページでも有効かもしれません。
mixin strong hr p strong! hr +strong +strong
<hr/><p>strong!</p><hr/><hr/><p>strong!</p><hr/>
引数あり
liタグなど似ているけど本体が違う場合はこちら。
mixin strong(str)
hr
p=str
hr
+strong('cat')
+strong('dog')<hr/><p>cat</p><hr/><hr/><p>dog</p><hr/>
ブロックもち
Rubyのブロックよろしく、コンテンツがない場合の仮文章を置いておくことも可能です。
mixin article(title)
.article
.article-wrapper
h1= title
if block
block
else
p 今書いてます
hr
+article("素晴らしい未来")
hr
+article("jadeの記事")
p jadeは実際便利
p 利用重点
hr<hr/><div class="article"><div class="article-wrapper"><h1>素晴らしい未来</h1><p>今書いてます</p></div></div><hr/><div class="article"><div class="article-wrapper"><h1>jadeの記事</h1><p>jadeは実際便利</p><p>利用重点</p></div></div><hr/>
アイコン登録がない場合のデフォルトアイコン表示なんかにも使えるかもしれませんね。
attributes
HTMLタグの要素を動的に指定したい場合はこれです。shuzo-kino.hateblo.jp
これが
mixin link(href, name)
a(href=href)&attributes(attributes)= name
+link('/foo', 'foo')(class="blue btn")
br
+link('/foo', 'foo')(class="red btn")
br
+link('/foo', 'foo')(class="yellow btn")こうなります。
<a href="/foo" class="blue btn">foo</a><br/><a href="/foo" class="red btn">foo</a><br/><a href="/foo" class="yellow btn">foo</a>
