1. HAML For The Win! An introduction to HAML Oct. 13, 2011 1 Created for Magma Rails 2011 - www.magmarails.com Slides posted at http://tinyurl.com/magma-haml-sass Sample code from this presentation can be found in the following sample app: https://github.com/jonathandean/SASS-and-HAML-FTW
2. What is HAML? A more concise syntax for coding HTML in your Rails app Uses indentation for nesting markup Reduces code (no closing tags) Fixes the messy markup problem that often clutters views Uses a CSS-like syntax that is easier to read and compare to your style rules Makes coding your View layer faster Note: doesn’t affect render time or client-side performance, simply reduces coding efforts and makes the developer more efficient Easy to learn! Oct. 13, 2011 An Introduction to HAML by Jonathan Dean - www.jonathandean.com 2
3. Using HAML in Rails Use it as a replacement for ERB files If you use Bundler, add this to your Gemfile: gem "haml” Files named filename.html.haml (instead of filename.html.erb) will be interpreted by HAML instead of ERB Oct. 13, 2011 An Introduction to HAML by Jonathan Dean - www.jonathandean.com 3
4. A comparison HTML <body> <div id=“wrapper”> <div class=“stuff”> <a href=“#”>Top</a> </div> </div> </body> HAML %body #wrapper .stuff %a{:href => “#”} Top Oct. 13, 2011 An Introduction to HAML by Jonathan Dean - www.jonathandean.com 4 7 lines 78 characters 4 lines 36 characters Note: Some examples compile using different formatting, I changed them for the slides for readability
5. Tag names Use % and then the name of the tag Examples: Oct. 13, 2011 An Introduction to HAML by Jonathan Dean - www.jonathandean.com 5 HTML <body></body> <div></div> HAML %body %div
6. ID’s ID’s are just like they are in CSS #id_name Oct. 13, 2011 An Introduction to HAML by Jonathan Dean - www.jonathandean.com 6 HTML <div id=“mine”></div> <p id=“yours”></p> HAML %div#mine %p#yours
7. Classes Classes are also just like they are in CSS .class_name Oct. 13, 2011 An Introduction to HAML by Jonathan Dean - www.jonathandean.com 7 HTML <div class=“mine”></div> <p class=“yours”></p> HAML %div.mine %p.yours One way for multiple classes (more later) HTML <div class=“mine yours”></div> HAML %div.mine.yours
8. div is the default tag name If you want to leave out the tag name and just put classes and/or ID’s, %div is assumed Oct. 13, 2011 An Introduction to HAML by Jonathan Dean - www.jonathandean.com 8 HTML <div id=“mine”></div> HAML %div#mine (or just) #mine
9. ID’s and Classes together Oct. 13, 2011 An Introduction to HAML by Jonathan Dean - www.jonathandean.com 9 You can put ID’s and classes together as well HTML <div class=“yours” id=“mine”> </div> <div class=“yours his”id=“mine”> </div> HAML #mine.yours #mine.yours.his
10. Nesting Tags are nested by indentation only No closing tags! Oct. 13, 2011 An Introduction to HAML by Jonathan Dean - www.jonathandean.com 10 HAML #mine %p.yours hi! HTML <div id=“mine”> <p class=“yours”>hi!</p> </div>
11. Text content Text can go at the end of the line if there’s no other content to nest Can also be nested itself (required with other nested content) Oct. 13, 2011 An Introduction to HAML by Jonathan Dean - www.jonathandean.com 11 HAML #mine %p.yours hi! (or) #mine %p.yours hi! #mine %p.yours hi! %span dude HTML <div id=“mine”> <p class=“yours”>hi!</p> </div> <div id=“mine”> <p class=“yours”> hi! <span>dude</span> </p> </div> #mine %p.yourshi! %span dude
12. Attributes Use a Ruby style hash for attributes Oct. 13, 2011 An Introduction to HAML by Jonathan Dean - www.jonathandean.com 12 HTML <a href=“http://hi.com”>hi</a> <input type=“submit”> HAML %a{:href => ”http://hi.com”} hi %input{:type => "submit”} Or a more HTML-like syntax with () HAML %a(href=”http://hi.com”) hi %input(type="submit”) HTML <a href=“http://hi.com”>hi</a> <input type=“submit”>
13. Boolean Attributes Oct. 13, 2011 An Introduction to HAML by Jonathan Dean - www.jonathandean.com 13 Use boolean values for attributes such as “selected” HTML <input selected> <input> HAML %input{:selected => true} (or) %input(selected=true) (or) %input(selected) %input{:selected => false} (or) %input(selected=false)
14. Using an array for ID’s and Classes For the ID attribute it will separate the values by an _ For the Class attribute it will add them as separate classes Oct. 13, 2011 An Introduction to HAML by Jonathan Dean - www.jonathandean.com 14 HTML <p class=“one two”>hi</p> <p id=“one_two”>hi</p> HAML %p{:class => [‘one’,’two’]} hi %p{:id=> [‘one’,’two’]} hi
15. HTML?? You can also use regular HTML Converting a file over time Copy/paste a tracking code or something complicated and hard to write as HAML Oct. 13, 2011 An Introduction to HAML by Jonathan Dean - www.jonathandean.com 15 HTML <div id=“myParagraph”> <p>Hello there!</p> </div> HAML #myParagraph <p>Hello there!</p>
16.
17.
18. Filters Filters start with a : and let you put in indented content to be interpreted in a special way :javascriptfilter wraps some JavaScript in <script> and CDATA tags for inline JavaScript Oct. 13, 2011 An Introduction to HAML by Jonathan Dean - www.jonathandean.com 18 HTML <script> //<![CDATA[ alert(‘Hello there!’); //]]> </script> HAML :javascript alert(‘Hello there!’);
19. Filters :cssfilter wraps some CSS in <style> and CDATA tags for inline CSS Oct. 13, 2011 An Introduction to HAML by Jonathan Dean - www.jonathandean.com 19 HTML <style> /*<![CDATA[*/ .mine{ color: red; } /*]]>*/ </style> HAML :css .mine{ color: red; }
20. Other filters :plain – does not parse the content :escaped – same as plain but HTML-escapes the text :ruby – pass the content to the normal Ruby interpreter :sass – parse the content with SASS to produce CSS output and more! (see the docs) You can also make custom filters if you have special needs Oct. 13, 2011 An Introduction to HAML by Jonathan Dean - www.jonathandean.com 20
