Sass

Stoji za "Sintaksično izvrsne stilske tablice". Sass je produžetak kaskadno style sheets (CSS), jezik koji se koristi za definiranje izgleda i oblikovanja HTML dokumenti. Koristi potpuno kompatibilni CSS sintaksa, ali pruža dodatne značajke poput CSS varijabli i ugniježđena pravila koja CSS čine učinkovitijim i lakšim za uređivanje.

Jedan od nedostataka standardnog CSS-a je taj što ne podržava varijable. Na primjer, ako imate više stilova iste boje, boju morate definirati zasebno za svaki stil. Ako odlučite promijeniti boju, morate je promijeniti za svaku instancu u CSS dokumentu. S Sassom možete definirati boju kao varijablu i dodijeliti varijablu svakom stilu koji je koristi. Ako odlučite promijeniti boju, trebate je promijeniti samo jednom - tamo gdje je to u početku definirano u dokumentu.

Sljedeći primjer pokazuje kako definirati i koristiti CSS varijablu u Sass-u.

$ myColor: # 00695C;

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

Sass također podržava ugniježđena pravila, omogućavajući programerima da napišu učinkovitiji kod. U donjem primjeru, .dugme klasa je ugniježđena unutar # vrh str stil.

# vrh str
{
boja: # 004D40;

.dugme
{
boja pozadine: # 039BE5;
boja: #FFF;
}
}

Kada sastaviti, gornji kod će proizvesti sljedeći CSS:

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

Iako Sass pruža nekoliko pogodnosti za web developera, Sass dokumenti nisu prepoznati web preglednici. Stoga se datoteka Sass mora prvo kompajlirati u CSS prije nego što se koristi u HTML dokumentu. To se može učiniti lokalno prije slanja CSS-a na web poslužitelj pomoću programa poput Kompas.app or Koala. Također se može kompilirati na poslužitelju pomoću a PHP or Rubin skripta koja kompajlira Sass u CSS.