Sass

Zkratka pro „Syntactically Awesome Style Sheets“. Sass je rozšíření kaskádových stylů (CSS), jazyka používaného k určení rozvržení a formátování dokumentů HTML. Používá plně kompatibilní syntaxi CSS, ale poskytuje další funkce, například proměnné CSS a vnořená pravidla, díky kterým je CSS efektivnější a snadněji se upravuje.

Jednou z nevýhod standardního CSS je, že nepodporuje proměnné. Pokud například máte několik stylů se stejnou barvou, musíte barvu definovat samostatně pro každý styl. Pokud se rozhodnete barvu změnit, musíte ji změnit u každého výskytu v dokumentu CSS. V Sass můžete barvu definovat jako proměnnou a přiřadit tuto proměnnou každému stylu, který ji používá. Pokud se rozhodnete barvu změnit, stačí ji změnit jednou — na místě, kde je v dokumentu původně definována.

Následující příklad ukazuje, jak v Sass definovat a používat proměnnou CSS.

  $myColor: #00695C;

  .pageTop { background-color: $myColor; }
  .infoText { color: $myColor; }
  .pageBottom { background-color: $myColor; }

Sass také podporuje vnořená pravidla, která vývojářům umožňují psát efektivnější kód. V níže uvedeném příkladu je třída .button vnořena do stylu #top p.

  #top p
  {
    color: #004D40;

    .button
    {
      background-color: #039BE5;
      color: #FFF;
    }
  }

Po zkompilování vytvoří výše uvedený kód následující CSS:

  #top p { color: #004D40; }
  #top p .button { background-color: #039BE5; color: #FFF; }

Sass sice nabízí webovým vývojářům několik výhod, dokumenty Sass však webové prohlížeče nerozpoznají. Soubor Sass proto musí být před použitím v dokumentu HTML nejprve zkompilován do CSS. To lze provést lokálně před nahráním CSS na webový server pomocí programu, jako je Compass.app nebo Koala. Kompilaci lze provést také na serveru pomocí skriptu PHP nebo Ruby, který zkompiluje Sass do CSS.