SASS

SASS neboli Syntactically awesome style sheets je jazyk pro tvorbu stylů, který původně navrhl Hampton Catlin a byl vyvinut Natálií Weizenbaumovou. Následně byl SASS rozšířen o jednoduchý skriptovací jazyk SassScript, který se používá v SASS souborech.

SASS patří mezi skriptovací jazyky, které slouží k před-procesování a jsou interpretovány nebo kompilovány jako CSS (Cascading Style Sheets). SassScript je vlastní skriptovací jazyk. Sass se skládá ze dvou různých syntaxí.

Zamýšlená syntax a SCSS

Původní syntax, označovaná jako „zamýšlená syntax“ používá syntax podobnou Hamlu. Používá odsazení pro oddělení bloků kódu a symbol nového řádku pro oddělení pravidel. Novější syntax, tedy SCSS (Sassy CSS) používá blokové formátování podobně jako CSS. Používá závorky k oddělení bloků kódu a středníky k oddělení řádků v rámci bloku. Zamýšlená syntax a SCSS syntax se obvykle rozlišují odlišnou koncovkou souboru .sass a .scss.

Proč vzniklo SASS

SASS rozšiřuje CSS tím, že nabízí několik mechanismů, které jsou dostupné v tradičnějších programovacích jazycích a to zvláště objektově orientovaných, které ale nejsou dostupné v CSS3. Když je SassScript interpretován, tvoří bloky CSS pravidel pro různé sekce, tak jak je to definováno v Sass souboru. Sass interpreter následně přeloží SassScript do CSS. Další variantou je možnost, že Sass monitoruje soubory .sass nebo .scss a překládá je do výstupu souboru .css, kdykoliv je soubor uložen.

Oficiální implementace Sass je open-sourcová a je naprogramována v Ruby. Existují i další implementace, například v Dart nebo PHP a také vysoce výkonná implementace v C, která se nazývá libSass. Existuje i implementace v Javě, která se nazývá JSass, Vaadin má také Java implementaci Sass. Zamýšlená syntax je metajazyková. SCSS je vnořený metajazyk, tedy CSS je validní SCSS se shodnou sémantikou. SASS podporuje integraci s rozšířením Firefox, které se nazývá Firebug.

Výhody použití SASS

• SASS zjednodušuje psaní čistého, jednoduchého a stručného CSS.
• Obsahuje méně kódu, takže je možné psát CSS rychleji.
• Je stabilnější, mocnější a elegantnější nežli CSS, protože je jeho rozšířením. Je tak pro designery a vývojáře jednoduché s ním pracovat rychleji a efektivněji.
• Je kompatibilní se všemi verzemi CSS, je tedy možné využít libovolné CSS knihovny.
• Je možné použít funkce, jako jsou manipulace s barvou, matematické funkce nebo další hodnoty.

Nevýhody použití SASS

• Vývojář si musí udělat čas, aby se dokázal naučit nové funkcionality před-procesoru předtím, nežli ho může začít používat.
• Použití SASS může způsobit ztrátu výhod, které se pojí s vestavěnou funkcí prohlížeče pro zobrazení kódu.

Srovnání s použitím CSS

• SASS je CSS kompatibilní. Díky tomu, že je SCSS kompatibilní se syntaxí CSS, stačí přejmenovat soubor psaný v css a začít využívat nadstavby, které SASS nabízí.
• Možnost použití proměnných. Na rozdíl od CSS SASS nabízí použití proměnných, které umožňují uložení hodnoty nebo sady hodnot a následně je používat napříč celým SASS souborem. Při kompilaci následně SASS všechny proměnné nahradí uloženou hodnotou. Stačí pak hodnotu změnit a znovu zkompilovat a celý soubor je rázem aktualizovaný.
• Použití funkce mixin. Mixiny jsou jako funkce v jiných programovacích jazycích. V CSS je často potřeba opakovat blok kódu několikrát. Naproti tomu SASS umožňuje použití těchto mixinů, které vracejí hodnotu nebo sadu hodnot a dají se do nich vkládat parametry.
• Správa velkého množství stylů. V CSS je možnost vyhledávat pomocí komentářů, nebo rozdělit soubor do menších částí, které je ale pak nutné importovat zvlášť. Naproti tomu SASS umožňuje použití pravidla import, které naimportuje definovanou sadu souborů a následně z ní vytvoří jediné CSS.
• Komunita. Komunita okolo SASS je velká, ale CSS je mnohem rozšířenější a proto k němu existuje obrovská spousta rad, tipů i návodů.