Haml (HTML Abstraction Markup Language) er et markup-språk for å lage enkel og ren html uten inline-koding. Det er laget som en erstatning for Rails sin RHTML, men kan utmerket godt brukes som en erstatning til ren html. Haml er indenteringssensitiv. Resultatet er mindre og mer kompakt kode, i tillegg til at vi automatisk får generert pen xhtml. Det tar ikke mange minuttene å lære seg haml. Sjekk ut tutorial for en rask innføring.
<div id="content">
<div class="left column">
<h2>Velkommen til open.bekk.no</h2>
innhold</div>
<div class="right column">
<a href="url">En link</a></div>
</div>#content
.left.column
%h2 Velkommen til open.bekk.no
%p innhold
.right.column
%a{:href => "url"} En linkHaml kommer med sin egen versjon av CSS, kalt Sass (Syntactically Awesome StyleSheets). Sass er en oversiktlig og god måte å skrive nøstede regler. I Sass kan man definere variabler, noe som gjør det enklere og raskere å endre verdier.
#header { background: #FFFFFF; } #header .error { color: #FF0000; } #header a { text-decoration: none } #header a:hover { text-decoration: underline }
!error_color = #FF0000 #header :background #FFFFFF .error :color= !error_color a :text-decoration none :hover :text-decoration underline
Kombinasjonen Haml og Sass er utmerket for å lage raske prototyper. Selv om dette er laget for ruby, er det ikke noe i veien for å bruke det til ren html/css. Den største fordelen for rask prototyping er Sass. Det er mye raskere og mer oversiktlig å gjøre endringer i sass enn det er i css. Muligheten for variabler føles naturlig for en programmerer, og gjør også koden mer lesbar (!error_color sier leseren myer mer enn #FF0000).
Weblesere forstår ikke haml/sass. Du trenger derfor en server som kan oversette dette. En rask og enkel løsning er å bruke Serve. Serve fyrer opp en instans av Webrick fra katalogen du står i. Ønsker du muligheten til å bruke partials for å redusere duplisering i haml-filene, kan jeg anbefale å bruke Sinatra i stedet for Serve.
Så enkelt er det å komme i gang:
- ruby
- haml (“gem install haml” fra commandprompt)
- serve (“gem install serve” fra commandprompt)
- starte opp serve (“serve” fra commandprompt i ønsket katalog)