Haml | CodeNote

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

2013 3/5

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

2012 12/18

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

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

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

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

・Hamlでerbの「-%>」(直後の改行を出力しない)を実現するには？ – [email protected]

■ 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_of (Array) – APIdock

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

2012 5/12

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

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

・#haml.tutorial

・Route 477 – Haml早見表

・Haml レシピブック 11の技 – ursmの日記

・haml内のrubyコード – 橋本詳解

・マークアッパー的 Haml入門21の手引き

以上です。

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

2012 4/14

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

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

・gf3/haml.mode

・brajeshwar/Sass.mode

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

以上です。

ノンデザイナーズ・デザインブック [フルカラー新装増補版]

posted with ヨメレバ

Robin Williams 毎日コミュニケーションズ 2008-11-19

コメントを書く
CODA . Haml . Sass

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

2012 4/13

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では綺麗に同じインデントの階層で並んでいるので、安心しました。

以上です。