はじめに
飽きもせずHamlの基礎について書いていきます。
今回はクラスのネストについてです。
実行
例えば、htmlで次の様に書かれているとします。
<div ="wrapper">
<div ="top">
</div>
<div ="down">
</div>
</div>
wrapperという大きなクラスがあり、その中にtopとdownという小さなクラスが二つあります。
このように親要素・子要素があるhtmlファイルだと、ちょっとした書き間違えが起こります。例えば次のようなものです。
<div ="wrapper">
<div ="top">
<div ="down">
</div>
</div>
これは<div ="top">の閉じタグがない状態です。これだとCSSがちゃんと適用されないなどのエラーが起きます。
単純なミスですが、意外と気づきにくく、エラー解決まで時間を要することも少なくないです。
しかし、Hamlを使えばこの問題を多少なり解決することができます。
前述のコードをHamlで書き直すと次のようになります。
.wrapper
.wrapper__top
.wrapper__down
htmlよりも短く書けたのが分かると思います。
一番わかり易い違いは閉じタグがないことです。
クラス名を書いた後に、本文を書くだけでオブジェクトが作れます。
これなら閉じタグを書き忘れた事によるエラーが起きえません。
もう一つはクラスの書き方です。
htmlでは、親要素には親要素のクラスのみ、子要素には子要素のクラスのみを書いていましたが、
Hamlでは子要素には親要素を含めたクラスを書きます。
書き方は.親要素のクラス名__子要素のクラス名と書きます。間に_（アンダーバー）を二つ続けて書きます。
上記のコードだと、親要素がwrapper子要素がtop,downなので、
.wrapper__top
.wrapper__down
と書きます。
また、子要素は親要素から半角2文字分のインデントをつけます。
そうしないとエラーが起きて、ビューが表示されません。
これにさらに子要素を追加する、例えばtopの子要素としてright,leftをつける場合は、
.wrapper
.wrapper__top
.wrapper__top__right
.wrapper__top__left
.wrapper__down
という風に書けます。
ちなみに、これをhtmlで記述すると
<div ="wrapper">
<div ="top">
<div = "right">
</div>
<div = "left">
</div>
</div>
<div ="down">
</div>
</div>
となります。
注意点としまして、例えば次のように途中のクラス名が間違っていると不具合が起きます。
.wrapper
.wrapper__top
.wrapper__tap__right
.wrapper__tap__left
.wrapper__down
子要素のクラス名で、親要素のクラスがtopにも拘わらずtapと誤って記述されています。
こうなると、親要素とは全く関係ない要素と判断され、CSSやJSなどで不具合が出てきます。
特にJSの場合、関数が上手く発火してくれない原因の多くがクラス名を間違って書いているだったりする事が多いです。
Hamlは便利ですが、エラーが全く起きないわけではないので、記述する時は最新の注意が必要です（これはHamlに限ったことではありませんが）