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

コンパイラかく語りき

文系新卒プログラマーのメモ

slim初心者のslimメモ2点

Slim

f:id:chuck0523:20150921092140p:plain

 

chuckです。slimにまだまだ慣れていなくて、新たに気づいたことを書きます。

 

 

htmlタグのあとはインデント

htmlタグのあとにはインデントが必要です。

 

インデントなし

f:id:chuck0523:20150921092236p:plain

htmlタグの後にインデントがありません。これをコンパイルすると、こうなります。

f:id:chuck0523:20150921092404p:plain

2〜4行目でhtmlタグが完結していますね。

これはインデントが無いことによって、htmlタグだけで完結してしまっているためです。

 

インデントあり

f:id:chuck0523:20150921092540p:plain

htmlタグのあとに、インデントがあります。これで、全ての要素がhtmlタグで包まれます。Slimではインデントが重要なんですね。

 

コンパイル後はこのとおり。

f:id:chuck0523:20150921092641p:plain

 

 

IDとクラスはスペースをあけない

divタグにIDとクラスを指定したいとします。

通常のhtmlに慣れていると、このように書きたくなってしまいます。

f:id:chuck0523:20150921092742p:plain

ただし、それぞれの属性の間にはスペースは不要です。このままコンパイルするとこうなります。

f:id:chuck0523:20150921092916p:plain

IDとクラスが内包されるテキストとしてみなされています。それに、インラインのimgタグまでテキストになっていますね。

 

正しくはこうです。

f:id:chuck0523:20150921093033p:plain

IDもクラスもスペースを入れずにつなげて書きます。

 

コンパイル結果はこの通り。

f:id:chuck0523:20150921093109p:plain

 

 

参考にしたサイト様

qiita.com

 

qiita.com