Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

5,157 views

Published on

in RubyKaigi2009

Published in: Technology, Business
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/yxufevpm } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/yxufevpm } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/yxufevpm } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/yxufevpm } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/yxufevpm } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/yxufevpm } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

×