Haml And Sass: Put your markup on a diet

Text-only Preview

Haml and SassPut your markup on a diet1(X)HTML is unwieldy• Repetition• Closing tags• id and class everywhere• Arbitrary formatting• Indentation not enforced• Hard to see the structure• Accident-prone2Case in point3Case in point3CSS is not much better• More repetition• Nested Selectors• padding-left, padding-right, etc.• No consistent formatting4Haml and Sass to the rescue!5What is Haml?• XHTML Abstraction Markup Language• Markup that describes XHTML• Nesting through indentation (like Python)• Convenient shortcuts for common elements and attributes• Guiding principle: Markup should be beautiful6What is Sass?• CSS compliment to Haml• Nesting through indentation• Named constants• Calculated values7Examples8XHTML<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html lang=”en” xml:lang=”en” xmlns=”http://www.w3.org/1999/xhtml”><head><title>XHTML Example</title></head><body><div id=”container”><div id=”header”><h1 class=”pagetitle”>XHTML Example</h1></div><div id=”content”><span class=”announcement”>BarCamp is coming to Nashville on August 18th!</span><p class=”normaltext”>Lorem ipsum...</p></div><div id=”footer”><span class=”copyright”>(c) 2007 Example Industries</span></div></div></body></html>9