Haml and Sass: Solution for you who get tired of ugly markup

<?xml version='1.0' encoding='utf-8' ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns='http://www.w3.org/1999/xhtml'> <head> <title><%=h @title %></title> </head> <body> <% if @content_for_nav %> <div class='navigation'> <%= yield :nav %> </div> <% end %> <div class='content'> <%= yield %> </div> </body> </html>

!!! XML !!! 1.1 %html{:xmlns => 'http://www.w3.org/1999/xhtml'} %head %title&= @title %body - if @content_for_nav .navigation = yield :nav .content = yield

<?xml version='1.0' encoding='utf-8' ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns='http://www.w3.org/1999/xhtml'> <head> <title><%=h @title %></title> </head> <body> <% if @content_for_nav %> <div class='navigation'> <%= yield :nav %> !!! XML </div> !!! 1.1 <% end %> %html{:xmlns => 'http://www.w3.org/1999/xhtml'} <div class='content'> %head <%= yield %> %title&= @title </div> %body </body> - if @content_for_nav </html> .navigation = yield :nav .content = yield 432 characters 192 characters

<h1>Hello, World!</h1> %h1 Hello, World!

<p> %p Hello, Hello, World! World! </p> <ul> <li>alpha %ul <ul> %li <li>bravo</li> alpha </ul> %ul </li> %li bravo <li>charly</li> %li charly </ul>

<a href=”…”>Haml</a> %a{:href => ’…’} Haml %div{:class=>‘block’} … <div class=”block”> … %div.block … </div> .block … <div id=”header”> … #header … </div>

<%= link_to … %> = link_to … <p> <%=h user.name %> %p&= user.name </p> <li title=”<%= user.name %>”> %li{:title=>user.name} … … </li>

<% users.each do |u| %> - users.each do |u| <li><%=h u.name %></li> %li&= u.name <% end %> <% if @user.admin? %> - if @user.admin? <%= admin_menu %> = admin_menu <% else %> - else <%= common_menu %> = common_menu <% end %>

- %w(foo bar).each do |s| = s - end Syntax error on line 3: You don't need to use "- end" in Haml. Use indentation instead: - if foo? %strong Foo! - else Not foo.

<%= %w(foo bar).map do |s| %> <% s.upcase %> <% end.join(‘<br/>’) %> = %w(foo bar).map do |s| - s.upcase - end.join(‘<br/>’)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 !!! Transitional//EN" …> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML !!! 1.1 1.1//EN" …> <?xml version='1.0' !!! XML encoding='utf-8' ?>

!!! XML !!! 1.1 %html{:xmlns => 'http://www.w3.org/1999/xhtml'} %head %title&= @title %body - if @content_for_nav .navigation = yield :nav .content = yield

.content { .content margin: 1em; margin: 1em } .content h1 { h1 font-size: 3em; font-size: 1em } .content h1 strong { strong color: red; color: red }

!base_color = red !base_margin = 3em h3 color: white background-color = !base_color margin-left = !base_margin

!base_color = red !base_margin = 3em h4 color = !base_color - #666 background-color: white margin-left = !base_margin + 1em

=round-border border-radius: 16px -webkit-border-radius: 16px -moz-border-radius: 16px .navigation a +round-border .navigation a { border-radius: 16px; -webkit-border-radius: 16px; -moz-border-radius: 16px; }

=clearfix display: inline-block &:after content: "." display: block height: 0 clear: both visibility: hidden * html & height: 1px ul.menu +clearfix li float: left

=sexy-border(!color, !width = 1in) border: color = !color width = !width style: dashed p +sexy-border("blue") p { border-color: #0000ff; border-width: 1in; border-style: dashed; }

$ gem install haml

$ haml --rails path/to/rails_app $ vim app/views/hello/index.html.haml $ vim public/stylesheets/sass/style.sass

Haml and Sass: Solution for you who get tired of ugly markup

0 comments

Notes on slide 1

3 Favorites, 1 Group & 1 Event