Slimで動的なClass名やData属性、インラインCSSなどの書き方

Slimでrubyコードなどで動的なクラス名を書くときなどの書き方メモです。

Slimでidやclassを動的に書く

.classnameなどのSlim独自の記法ではなく、 erbに近い書き方で div class="classname"と抜きだす。

slim

/ 動的なクラス名のみの場合
div class=user.name

/ 静的 + 動的なクラス名の組み合わせ
div class="user-thumb user-small user-#{user.name}"

出力html

<!- 動的なクラス名のみの場合 ->
<div class="taro"></div>

<!- 静的 + 動的なクラス名の組み合わせ ->
<div class="user-thumb user-small user-taro"></div>

Slimで ifでクラス名を条件分岐させる

上と同じく div class="classname" で記述。
下記のどの書き方でも通るので、可読性のよいものを選ぶ。
#{} は入れ子にしてもOK。
もし中身がfalseだったら、コンパイルされる際にちゃんとclass=という表記が消えるのだ

slim

/ 動的なクラス名のみの場合
div class=user.name if user.present?
div class="team-#{user.name}" if user.present?

/ 静的なクラス名 + 動的なクラス名
div class="team-wrap #{user.name if user.present?}"
div class="team-wrap #{'team-#{user.name}' if user.present?}"

出力html

<!- 動的なクラス名のみの場合 ->
<div class="yoshio"></div>
<div class="team-yoshio"></div>

<!- 静的なクラス名 + 動的なクラス名 ->
<div class="team-wrap yoshio"></div>
<div class="team-wrap team-yoshio"></div>

<!- もし user.name がfalseだったら ->
<div></div>

クラス名を複数条件で分岐させたい場合

三項演算子で、複数の条件分岐を記述する。
属性内が複雑だと可読性が微妙になるので、下記Slimの一番下の行(書き方その2)のように、静的なものは .classname で、動的なものは class="classname" と抜き出して書く、というルール付けをしてしまってもいいかもしれない。

slim

/静的なクラス名
div class=(user.present? ? "team-wrap" : "no-user")

/静的なクラス名 + 動的なクラス名
div class="team-wrap #{user.present? ? 'team-#{user.name}' : 'no-user'}"

/静的なクラス名 + 動的なクラス名 書き方その2
div.team-wrap class=(user.present? ? 'team-#{user.name}' : 'no-user')

出力html

<!- 静的なクラス名 ->
<div class="team-wrap"></div>

<!- 静的なクラス名 + 動的なクラス名 ->
<div class="team-wrap team-yoshinoya"></div>

値がない属性を書きたい場合

リッチスニペット用のitemscopeやjs用のdata属性など、
属性名のみ書きたい場合は、属性に空の値を渡してやればOK

slim

.user-wrap itemscope=""

出力html

<div class="user-wrap" itemscope></div>

属性がたくさんある場合に見やすくする

大かっこをつければ改行してもOKなので、属性がたくさんある場合は
可読性を高めるためにツラを揃えてもよいかも。

slim

/揃える前
.user-bases data-type='author' data-id="#{user.id}" data-js-action="user.bases.show" itemscope="" itemtype="http://schema.org/Author"
  | YOSHIO
  ...

↓↓

/後
.user-bases[data-type='author'
    data-id="#{user.id}"
    data-tabelog-js-action="user.bases.show"
    itemscope=""
    itemtype="http://schema.org/Author"]
  | YOSHIO
  ...

Styleをインラインで記述したい場合

slim

.user-wrap(style="float: right; padding-right: 20px; font-size: 70%;")

コロンで区切ってhtmlの入れ子をワンライナーで表現

できるけど、可読性が悪いしそんなに使わないほうがよいと思う。

slim

.user-wrap: .user-inner: p.user-param xxxxx

出力html

<div class="user-wrap">
  <div class="user-inner">
    <p class="user-param">
      xxxxx
    </p>
  </div>
</div>