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

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    3 Favorites, 1 Group & 1 Event

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

    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. !!! 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. <?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. <h1>Hello, World!</h1> %h1 Hello, World!
    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. <a href=”…”>Haml</a> %a{:href => ’…’} Haml %div{:class=>‘block’} … <div class=”block”> … %div.block … </div> .block … <div id=”header”> … #header … </div>
    7. <%= link_to … %> = link_to … <p> <%=h user.name %> %p&= user.name </p> <li title=”<%= user.name %>”> %li{:title=>user.name} … … </li>
    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. - %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. <%= %w(foo bar).map do |s| %> <% s.upcase %> <% end.join(‘<br/>’) %> = %w(foo bar).map do |s| - s.upcase - end.join(‘<br/>’)
    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. !!! 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. .content { .content margin: 1em; margin: 1em } .content h1 { h1 font-size: 3em; font-size: 1em } .content h1 strong { strong color: red; color: red }
    14. !base_color = red !base_margin = 3em h3 color: white background-color = !base_color margin-left = !base_margin
    15. !base_color = red !base_margin = 3em h4 color = !base_color - #666 background-color: white margin-left = !base_margin + 1em
    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. =clearfix display: inline-block &:after content: "." display: block height: 0 clear: both visibility: hidden * html & height: 1px ul.menu +clearfix li float: left
    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. $ gem install haml
    20. $ haml --rails path/to/rails_app $ vim app/views/hello/index.html.haml $ vim public/stylesheets/sass/style.sass

    + Keita UrashimaKeita Urashima, 4 months ago

    custom

    974 views, 3 favs, 1 embeds more stats

    in RubyKaigi2009

    More info about this document

    CC Attribution License

    Go to text version

    • Total Views 974
      • 799 on SlideShare
      • 175 from embeds
    • Comments 0
    • Favorites 3
    • Downloads 16
    Most viewed embeds
    • 175 views on http://d.hatena.ne.jp

    more

    All embeds
    • 175 views on http://d.hatena.ne.jp

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories

    Groups / Events