私の好きなHamlスニペットまとめ

> この記事は、[Favorite Haml Snippets - by Katy DeCorah](http://codepen.io/katydecorah/blog/haml)の日本語訳です。

***
[CodePen](http://codepen.io/ "CodePen")でpenを作成するときに[Haml](http://haml.info/ "Haml")を愛用していますが、
構文を覚えるのは今でも大変苦労しています。
この投稿で、私が過去に使った楽しいHamlスニペット達をまとめてみました。
(もっと面白いHamlを探して、どんどん更新していくつもりです)

##基本要素
![threes_app_store_button.jpg](https://qiita-image-store.s3.amazonaws.com/0/42246/bfc4d245-802d-004a-c5d5-d9d46706fc9b.jpeg)
[3D - App Storeボタン](http://codepen.io/katydecorah/pen/dAwft "THREES App Store Button")
 
##変数
###文字列
![a_by_tommy_chandra.jpg](https://qiita-image-store.s3.amazonaws.com/0/42246/3c172549-1e0f-3bc1-3eb3-ea77ec5550cd.jpeg)
["A" - Tommy Chandra](http://codepen.io/katydecorah/pen/nskul "A by Tommy Chandra")
###日付
![haml_calendar.jpg](https://qiita-image-store.s3.amazonaws.com/0/42246/638baace-e8ce-236f-0b27-5b875e9395a0.jpeg)
[Hamlカレンダー](http://codepen.io/katydecorah/pen/aDAoG "Hamlカレンダー")
###時刻
![haml_clock.jpg](https://qiita-image-store.s3.amazonaws.com/0/42246/ce209993-e649-510f-3ea9-adcab48f7f55.jpeg)
[Haml時計](http://codepen.io/katydecorah/pen/xADtE "Haml時計")
##ループ/配列
###N回
![wave.jpg](https://qiita-image-store.s3.amazonaws.com/0/42246/a4c24cbf-de81-9886-3e7b-b65077e1da43.jpeg)
[波](http://codepen.io/katydecorah/pen/fFlpk "波")
###配列のループ
![food_by_nos.jpg](https://qiita-image-store.s3.amazonaws.com/0/42246/6151d7e8-d1ae-05cf-a466-712cdc68525b.jpeg)
[食べもの - nos](http://codepen.io/katydecorah/pen/Kyabd "食べもの - nos")
###多次元配列のループ
![explore_type_properties.jpg](https://qiita-image-store.s3.amazonaws.com/0/42246/4db533d5-944b-824f-a291-c8de8b6d14f5.jpeg)
[Typeプロパティを探る](http://codepen.io/katydecorah/pen/xsdtn "Typeプロパティを探る")
###ループと2つの配列のジッピング
![slidey_background.jpg](https://qiita-image-store.s3.amazonaws.com/0/42246/37dfaab5-2bfb-ac0c-713c-00a5657c461d.jpeg)
[スライドする背景](http://codepen.io/katydecorah/pen/whobi "スライドする背景")


![dribbble_simple_icons.jpg](https://qiita-image-store.s3.amazonaws.com/0/42246/9e59e14a-931f-fc1f-3802-fb2a27789352.jpeg)
[シンプルなアイコン - Dribbble](http://codepen.io/katydecorah/pen/KhfCn "シンプルなアイコン")
###ループと3つの配列のジッピング
![word-break_or_word-wrap.jpg](https://qiita-image-store.s3.amazonaws.com/0/42246/d36297b6-b884-253d-115a-cf52e11fba69.jpeg)
[word-breakとword-wrap](http://codepen.io/katydecorah/pen/ywmBE "word-breakとword-wrap")

###組合せとジョイン
![haml_combinations.jpg](https://qiita-image-store.s3.amazonaws.com/0/42246/d0872cee-f38a-388f-4ab1-013728bfe392.jpeg)
[Haml組合せ](http://codepen.io/katydecorah/pen/GAayl "Haml組合せ")

###ケース文
![forebrury.jpg](https://qiita-image-store.s3.amazonaws.com/0/42246/cbc323f2-472b-5895-29ed-aa2f92f216c6.jpeg)
[Forエブラリー(2月)](http://codepen.io/katydecorah/pen/Chmws "Forエブラリー(2月)")

###SCSSの内包
![haml_clock.jpg](https://qiita-image-store.s3.amazonaws.com/0/42246/ce209993-e649-510f-3ea9-adcab48f7f55.jpeg)
[Haml時計](http://codepen.io/katydecorah/pen/xADtE "Haml時計")

###Haml + AngularJS
![explore_type_properties.jpg](https://qiita-image-store.s3.amazonaws.com/0/42246/4db533d5-944b-824f-a291-c8de8b6d14f5.jpeg)
[Typeプロパティを探る](http://codepen.io/katydecorah/pen/xsdtn "Typeプロパティを探る")

![mighty_transformin_power_triangles.jpg](https://qiita-image-store.s3.amazonaws.com/0/42246/22ee09c5-19e9-5762-6b44-cad7bcbccee4.jpeg)
[変化する強大な三角形](http://codepen.io/katydecorah/pen/wsveL "強大な変化をする三角形")

***
##コメント

#####Linoel T(`@elrumordelaluz`) 投稿日: 2014年7月11日
>かっこいいですね、`@katydecorah`の投稿はかなり便利です。
ありがとうございます！

#####Bryan Levay(`@thousand`) 投稿日: 2014年8月1日
>少々厚かましい提案になりますが、
Jadeをチェックしてみるべきだと思います。
Jadeは、とてもHaml的な構造を兼ね備えています。
でも、Hamlよりもっとループ処理に対して相性がいいです。
JavaScriptを基盤として、テンプレート、ループ、
そして様々な要素を同じように構築することができます。
HAMLの後にJadeを習得しましたが、それ以降使い続けています。

#####Katy DeCorah (`@katydecorah`) 投稿日: 2014年8月1日
> `@thousand`
一度だけJadeをチェックした記憶があります。
でも、正直言うとそこまでのめり込みませんでした。
いつか見返して見る必要がありそうですね！
ご意見ありがとうございます。

#####Arden (`@aderaaij`) 投稿日: 2014年8月25日
> 大変素晴らしい、ありがとうございます！