HAML in SASS - hitrejše, lepše in uporabnejše pisanje xHTML in CSS

V začetnih letih izdelovanja spletnih strani smo uporabljali HTML. Frustracije so bile velike, kdor je kdajkoli naredil kakšno spletno stran “na roke”, bo vedel o čem je govora. Svetovne spletne glave so se združile in splavile nov standard - XHTML - ki temelji na XML osnovah in pravilih. Svet je postal lepši, a vendarle ne tudi bistveno boljši.

Pred kratkim se je pojavila zamisel o HAML ( XHTML Abstraction Markup Language ), sledil mu je še SASS ( Syntactically Awesome StyleSheets ), ki nam olajšata pisanje kode, saj ta postane precej bolj pregledna, hitreje jo je napisati, za povrh pa je še precej bolj uporabna kot doslej. Največja pridobitev, ki jo osebno vidim pri SASSu, pa so spremenljivke. YUP! Nisem se zmotil - spremenljivke! To pomeni, da lahko npr. neko barvo shranimo kot spremenljivko in to spremenljivko uporabimo na več koncih v SASS-u, kar bistveno olajša delo kadar želimo spremeniti to barvo za vse elemente, ki jo vsebujejo.

Če koga zanima zares hiter pregled o čem je govora, naj gre malce nižje, če pa vas zanimajo detajli, si lahko več o tej temi preberete na teh povezavah:

• HAML dokumentacija
• SASS dokumentacija

Primerjava xHTML in HAML:

XHTML koda

<div id="content">
    <div class="article">
      <div class="article title">Naslov Namišljenega Artikla</div>
      <div class="article date">31.12.2007</div>
      <div class="article entry">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      </div>
    </div>
</div>

se v HAML-u piše takole:

#content
    .articles
      .article.title
        Naslov Namišljenega Artikla
      .article.date
        31.12.2007
      .article.entry
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Primerjava CSS in SASS:

CSS koda:

#main {
    width: 90%;
  }
#main p {
    border-style: solid;
    border-width: 1px;
    border-color: #00f;
  }
#main p a {
    text-decoration: none;
    font-weight: bold;
  }
#main p a:hover {
    text-decoration: underline;
  }

se v SASS-u piše takole:

#main
    :width 90%
    p
      :border-style solid
      :border-width 1px
      :border-color #00f
      a
        :text-decoration none
        :font-weight bold
      a:hover
        :text-decoration underline

Zelo pomembno je, da sta HAML in SASS kodi občutljivi oziroma odvisni od tako imenovanih “white-space” znakov ( presledkov ), zato ni potrebno poudarjati, da je nekoliko pazljivosti, predvsem pa razumevanje delovanja nadvse priporočljivo.

Za konec pa še primer uporabe spremenljivk v SASSu:

!main_color = #00ff00

  #main
    :color = !main_color
    :p
      :background-color = !main_color
      :color #000000

Če to ni slinabilno - potem vam ni pomoči!