読者です 読者をやめる 読者になる 読者になる

Bye Bye Moore

猫マンション建築の野望を胸に零細事業主として資本主義の荒波に漕ぎ出したアラサー男の技術メモ

jadeのmixin機能で似たスクリプトをまとめる

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/>

f:id:shuzo_kino:20150606155022p:plain
アイコン登録がない場合のデフォルトアイコン表示なんかにも使えるかもしれませんね。

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>