劇的hamlアフター

今hamlでview画面を実装しているのだが、書き方がわからなくて手が止まってしまう場面があるので、
html.erbで書いたファイルをhamlに変換して書き方を調べてみる。
変換する方法は下記参考
qiita.com
確認していないので参考程度です。

Before

<article class="section">
  <div class="container">
    <header class="header header--section">
      <h2 class="text-middle">
        テストページ
      </h2>
    </header>
    <div>
      <ul class="listview js-lazy-load-images">
        <li style="margin-bottom: 15px">
            <a class="listview__element--right-icon" href="#">
              <div class="box">
                <div class="box__cell w80">
                   <div class="thumbnail__figure" style="background-image: url("#");"></div>
                </div>
                <div class="box__cell pl1em">
                  <h3 class="text-middle text-break color-sub">
                    <%= @product.title %>
                  </h3>
                  <p class="text-xsmall">
                    test
                  </p>
                </div>
              </div>
            </a>
          </li>
        </ul>
    </div>
  </div>
  <%= form_for [@product, @review] do |f| %>
    <div style="margin: 8px 0">
      <%= f.label :評価, style: { 'margin-right' => 8 } %>
      <%= f.number_field :rate, placeholder: '評価', value: 1, max: 10, min: 1, html: { class: "search__query", style: 'text-align: right;' } %>
    </div>
    <div style="margin: 8px 0">
      <%= f.text_area :review, placeholder: 'レビューを書いてね！', style: 'width: 100%;height: 300px;' %>
    </div>
    <div class="row">
      <div class="col10 push1">
        <%= button_tag type: "submit", class: "btn btn--block" do %>
              投稿する<i class="icon-arrow-right"></i>
        <% end %>
      </div>
    </div>
  <% end %>
</article>

After

%body
  %article.section
    .container
      %header.header.header--section
        %h2.text-middle
          テストページ
      %div
        %ul.listview.js-lazy-load-images
          %li{:style => "margin-bottom: 15px"}
            %a.listview__element--right-icon{:href => "#"}
              .box
                .box__cell.w80
                  .thumbnail__figure{:style => "background-image: url("}
                .box__cell.pl1em
                  %h3.text-middle.text-break.color-sub
                    = @product.title
                  %p.text-xsmall
                    test
    = form_for [@product, @review] do |f|
      %div{:style => "margin: 8px 0"}
        = f.label :評価, style: { 'margin-right' => 8 }
        = f.number_field :rate, placeholder: '評価', value: 1, max: 10, min: 1, html: { class: "search__query", style: 'text-align: right;' }
      %div{:style => "margin: 8px 0"}
        = f.text_area :review, placeholder: 'レビューを書いてね！', style: 'width: 100%;height: 300px;'
      .row
        .col10.push1
          = button_tag type: "submit", class: "btn btn--block" do
            投稿する
            %i.icon-arrow-right