カテゴリー : Haml

[Ruby on Rails][Haml] text mail 内で改行するにはバックスラッシュを使う

Ruby on Rails + Haml で、text mail 内で改行するには、バックスラッシュを使います。

Dear
= @user.name,
\
Your username is
= @user.username
\
\
\
\
Your status is
= @user.status

[参考]:HAML: Line breaks in text mail

Haml Tips

Ruby on Rails + Haml の Tips というかよく調べることまとめ。

■ 条件分岐によるclass名設定

#someId{class: some_condition? && 'someClass'}

■ 改行、半角空白が挿入される問題

Hamlでerbの「-%>」(直後の改行を出力しない)を実現するには? – QA@IT はてなブックマーク - Hamlでerbの「-%>」(直後の改行を出力しない)を実現するには? - QA@IT

■ ul, li の繰り返し

こんな感じの ul 内に li が3つ現れたら、次の ul へというDOMをHamlで出力するには、

<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>
 
<ul>
    <li>d</li>
    <li>e</li>
    <li>f</li>
</ul>

in_groups や in_groups_of を使って、下記のような感じに書ける。

- @items.in_groups_of(3) do |item_group|
  %ul
    - item_group.each do |item|
      %li
        = item.name

in_groups (Array) – APIdock はてなブックマーク - in_groups (Array) - APIdock

in_groups_of (Array) – APIdock はてなブックマーク - in_groups_of (Array) - APIdock

Haml でコーディングするときに参考になる記事まとめ

Haml でコーディングするときに参考になる記事をまとめてみました。

Haml の文法や書き方に迷ったら見るようにしています。

#haml.tutorial はてなブックマーク - #haml.tutorial

Route 477 – Haml早見表 はてなブックマーク - Route 477 - Haml早見表

Haml レシピブック 11の技 – ursmの日記 はてなブックマーク - Haml レシピブック 11の技 - ursmの日記

haml内のrubyコード – 橋本詳解 はてなブックマーク - haml内のrubyコード - 橋本詳解

マークアッパー的 Haml入門21の手引き はてなブックマーク - マークアッパー的 Haml入門21の手引き

以上です。

[Coda] HAML/SASS のカラーリング(色付け)設定方法

Coda にて、HAML/SASS のカラーリングを設定したので、その方法をメモ。

まず、下記のサイトからファイルをDLして、解凍後フォルダーの名前を HAML.mode と SASS.mode に変更します。

gf3/haml.mode はてなブックマーク - gf3/haml.mode

brajeshwar/Sass.mode はてなブックマーク - brajeshwar/Sass.mode

その後、/Library/Application Support/Coda/Modes ディレクトリ以下に HAML.mode と SASS.mode を設定します。

以上です。

[Haml] syntax error, unexpected keyword_ensure, expecting keyword_end というエラーの解決方法

Ruby on Rails で Haml を使っていて以下のようなエラーが発生しました。

■ エラーメッセージ

syntax error, unexpected keyword_ensure, expecting keyword_end

原因は、if 文の分岐の中をインデントを下げずに、下記のように記載していたせいでした。

%ul.nav を同じインデントで揃えたくて、こう書いたのですが、これがダメでした。

%div.container.nav-collapse
  %ul.nav
    %li #{ link_to "Article", "/articles" }
  - if user_signed_in?
  %ul.nav
    %li #{ link_to "Signed in as #{ current_user.email }", "#" }
  %ul.nav
    %li #{ link_to "Sign out", destroy_user_session_path, :method => :delete }
  - else
  %ul.nav
    %li #{ link_to "Sign up", new_user_registration_path }
  %ul.nav
    %li #{ link_to "Sign in", new_user_session_path }

正しくは、下記のように書きます。

%div.container.nav-collapse
  %ul.nav
    %li #{ link_to "Article", "/articles" }
  - if user_signed_in?
    %ul.nav
      %li #{ link_to "Signed in as #{ current_user.email }", "#" }
    %ul.nav
      %li #{ link_to "Sign out", destroy_user_session_path, :method => :delete }
  - else
    %ul.nav
      %li #{ link_to "Sign up", new_user_registration_path }
    %ul.nav
      %li #{ link_to "Sign in", new_user_session_path }

途中から、%ul.nav のインデントが1つ下がってて気持ち悪いですが、出力されるHTMLでは綺麗に同じインデントの階層で並んでいるので、安心しました。

以上です。