<?xml version='1.0' encoding='utf-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DT...
!!! XML
!!! 1.1
%html{:xmlns => 'http://www.w3.org/1999/xhtml'}
  %head
    %title&= @title
  %body
    - if @content_for_...
<?xml version='1.0' encoding='utf-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DT...
<h1>Hello, World!</h1>   %h1 Hello, World!
<p>
                        %p
  Hello,
                          Hello,
  World!
                          World!
</p>
<u...
<a href=”…”>Haml</a>   %a{:href => ’…’} Haml

                       %div{:class=>‘block’} …
<div class=”block”>
  …      ...
<%= link_to … %>      = link_to …

<p>
  <%=h user.name %>   %p&= user.name
</p>

<li title=”<%=
user.name %>”>        %li...
<% users.each do |u| %>
                        - users.each do |u|
<li><%=h u.name %></li>
                          %li&...
- %w(foo bar).each do |s|
  = s
- end

Syntax error on line 3: You don't
need to use "- end" in Haml. Use
indentation inst...
<%= %w(foo bar).map do |s| %>
  <% s.upcase %>
<% end.join(‘<br/>’) %>



= %w(foo bar).map do |s|
  - s.upcase
- end.join...
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0   !!!
Transitional//EN" …>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML       !!!...
!!! XML
!!! 1.1
%html{:xmlns => 'http://www.w3.org/1999/xhtml'}
  %head
    %title&= @title
  %body
    - if @content_for_...
.content {
                       .content
  margin: 1em;
                         margin: 1em
}
.content h1 {
           ...
!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_marg...
=round-border
  border-radius: 16px
  -webkit-border-radius: 16px
  -moz-border-radius: 16px

.navigation a
  +round-borde...
=clearfix
  display: inline-block
  &:after
    content: "."
    display: block
    height: 0
    clear: both
    visibili...
=sexy-border(!color, !width = 1in)
  border:
    color = !color
    width = !width
    style: dashed

p
    +sexy-border("...
$ 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
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Upcoming SlideShare
Loading in …5
×

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

4,859 views

Published on

in RubyKaigi2009

Published in: Technology, Business
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,859
On SlideShare
0
From Embeds
0
Number of Embeds
529
Actions
Shares
0
Downloads
33
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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

  1. 1. <?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>
  2. 2. !!! XML !!! 1.1 %html{:xmlns => 'http://www.w3.org/1999/xhtml'}   %head     %title&= @title   %body     - if @content_for_nav       .navigation         = yield :nav     .content       = yield
  3. 3. <?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
  4. 4. <h1>Hello, World!</h1> %h1 Hello, World!
  5. 5. <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>
  6. 6. <a href=”…”>Haml</a> %a{:href => ’…’} Haml %div{:class=>‘block’} … <div class=”block”> … %div.block … </div> .block … <div id=”header”> … #header … </div>
  7. 7. <%= link_to … %> = link_to … <p> <%=h user.name %> %p&= user.name </p> <li title=”<%= user.name %>”> %li{:title=>user.name} … … </li>
  8. 8. <% 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 %>
  9. 9. - %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.
  10. 10. <%= %w(foo bar).map do |s| %> <% s.upcase %> <% end.join(‘<br/>’) %> = %w(foo bar).map do |s| - s.upcase - end.join(‘<br/>’)
  11. 11. <!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' ?>
  12. 12. !!! XML !!! 1.1 %html{:xmlns => 'http://www.w3.org/1999/xhtml'}   %head     %title&= @title   %body     - if @content_for_nav       .navigation         = yield :nav     .content       = yield
  13. 13. .content { .content margin: 1em; margin: 1em } .content h1 { h1 font-size: 3em; font-size: 1em } .content h1 strong { strong color: red; color: red }
  14. 14. !base_color = red !base_margin = 3em h3 color: white background-color = !base_color margin-left = !base_margin
  15. 15. !base_color = red !base_margin = 3em h4 color = !base_color - #666 background-color: white margin-left = !base_margin + 1em
  16. 16. =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; }
  17. 17. =clearfix display: inline-block &:after content: "." display: block height: 0 clear: both visibility: hidden * html & height: 1px ul.menu +clearfix li float: left
  18. 18. =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; }
  19. 19. $ gem install haml
  20. 20. $ haml --rails path/to/rails_app $ vim app/views/hello/index.html.haml $ vim public/stylesheets/sass/style.sass

×