slimのcssの変数展開

slimでcssのid・classに変数展開したい場合はあると思います。

erbで書く場合は、そこまで意識しなくても書けるのですが、slimだとどういう風に書けばいいのだろうかって、悩んだりします。例えば、次のようなものです。

<li id="micropost-<%= micropost.id %>">
....
</li>

これをslimで書くとこうなります。

li id="micropost-#{micropost.id}"

単純に#{}で変数展開をするということですね。

あと、個人的に文字と変数展開が混ざる時の書き方がよく、混乱するので書いておきます。

<span class="timestamp">
 Posted <%= time_ago_in_words(micropost.created_at) %> ago.
</span>

slimだとこうなります。

span.timestamp
  | Posted
  = time_ago_in_words(micropost.created_at)
  | ago

この|の使い方が悩んだりしていました。

パイプは Slim に行をコピーしろと命じます。基本的にどのような処理でもエスケープします。パイプよりも深くインデントされた各行がコピーされます。

行をコピーしろというのは、前回の内容を引き継いだまま、行に書き足しができるってことなんですね。

理屈がわかれば怖くはない。