Sass

Zkratka pro „syntakticky úžasné šablony stylů“. Sass je příponou kaskádové styly (CSS), jazyk používaný k definování rozložení a formátování HTML dokumenty. Používá plně kompatibilní CSS syntax, ale poskytuje další funkce, jako jsou proměnné CSS a vnořená pravidla, díky nimž je CSS efektivnější a snadněji se upravuje.

Jednou z nevýhod standardního CSS je, že nepodporuje proměnné. Například pokud máte více stylů stejné barvy, musíte definovat barvu zvlášť pro každý styl. Pokud se rozhodnete změnit barvu, musíte ji změnit pro každou instanci v dokumentu CSS. Pomocí Sass můžete definovat barvu jako proměnnou a přiřadit ji ke každému stylu, který ji používá. Pokud se rozhodnete změnit barvu, stačí ji změnit pouze jednou - tam, kde je původně definována v dokumentu.

Níže uvedený příklad ukazuje, jak definovat a používat proměnnou CSS v Sass.

$ myColor: # 00695C;

.pageTop {barva pozadí: $ myColor; }
.infoText {barva: $ myColor; }
.pageBottom {barva pozadí: $ myColor; }

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

#top p
{
barva: # 004D40;

.knoflík
{
barva pozadí: # 039BE5;
barva: #FFF;
}
}

Kdy sestaven, výše uvedený kód vytvoří následující CSS:

#top p {color: # 004D40; }
#top p .button {barva pozadí: # 039BE5; barva: #FFF; }

Zatímco Sass poskytuje několik výhod webové vývojáře„Dokumenty Sass nejsou rozpoznány uživatelem internetové prohlížeče. Proto musí být soubor Sass nejprve použit v CSS, než bude použit v dokumentu HTML. To lze provést lokálně před nahráním CSS na webový server pomocí programu jako Kompas. Aplikace or Koala. Lze jej také zkompilovat na serveru pomocí a PHP or Rubín skript, který kompiluje Sass do CSS.