0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

hamlでクラス名やid名に変数を使う

Posted at

アプリ開発中にクラス名にインデックスをつけたいときがあり、書き方が分からずつまづいたので、同じような方がおられましたら参考にしてください。

基本

まず、基本的なクラス名id名の書き方は「.」「#」始まりで書き始めます。

#クラス名
.item_name
%p.item_name

#ID名
#item_name
%p#item_name

###変数を使った書き方
そして今回わたしがつまづいたのはeach文の中で変数名を使った書き方です。
下記の書き方で適用されました!

-@items.each_with_index do |item, i|
  %div{class: "#{item.name}"}
    %p{class: "item_name_#{i}"}

クラス名を{}で囲うと、適用されます!
each文ではない場合でも同じ書き方で適用されます

%div{class: @item.name}
0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?