Späť na zoznam

SASS - CSS Preprocesor

Rok 2016 bol pre nás vývojárov z pohľadu používaných technológií veľmi inovatívny. Na viacerých projektoch sme použili (a súčasne používame) SASS preprocesor, a preto Vám chceme pomocou tohto blogu o tejto technológii niečo napísať a predstaviť ju.

Vo "svete programátorov" je veľmi populárna, preto si myslíme, že nie je na škodu o nej niečo vedieť.

Čo je to preprocesor?

Preprocesor je program, ktorého výstup je potrebné spracovať ďalším programom.
V praxi to znamená, že Vami napísaný zdrojový kód v jazyku SASS, bude spracovaný ďalším programom, ktorého výsledkom je CSS  súbor.

Prečo používať preprocesor?

Samotné CSS je "nedokonalé"  a programátori sa počas vývoja stretávajú s rôznymi problémami, ktoré im táto nedokonalosť spôsobuje. Hlavne pri veľkých projektoch, na ktorých pracuje viacero vývojárov, je problém mať zdrojový kód prehľadný a ľahko udržiavateľný. Tiež sa veľakrát stáva, že sa v CSS štýloch musia programátori opakovať (písať rovnakú CSS vlastnosť na viacerých miestach) a tým len zväčšujú veľkosť a neprehľadnosť zdrojového kódu. 

V tomto blogu Vám v skratke vysvetlíme, ako dokáže CSS preprocesor tieto problémy vyriešiť.

Prečo práve SASS?

Na trhu sú k dispozícií rôzne CSS preprocesory. My sme sa však rozhodli používať SASS lebo:

  • má za sebou už viac ako 10 rokov neustáleho vývoja
  • obľubuje ho veľké množstvo vývojárov, ktorí sú súčasťou veľkej komunity
  • má k dispozícií široké spektrum nadstavbových modulov a frameworkov
  • je ľahko naučiteľný

SASS v skratke

SASS je skratkou pre Syntactically Awesome Stylesheets, čo v preklade znamená syntakticky úžasné štýly. Je napísaný v jazyku Ruby tvorcami Hampton Catlin, Nathan Weizenbaum a Chris Eppstein.

 



Hlavné vlastnosti SASS

  • premenné a dátové typy
  • vnáranie štýlov
  • matematické operácie
  • import externých súborov
  • porovnávanie čísel a reťazcov
  • cykly a funkcie
  • dedičnosť selektorov
"Vďaka týmto vlastnostiam je vývoj oveľa rýchlejší a jednoduchší. Aj na veľkých projektov je zdrojový kód prehľadný a dlhodobo veľmi dobre udržiavateľný."

Príklady využitia SASS v praxi

Použitie premenných

Jednou z najväčších výhod SASS je možnosť zadefinovať si premenné. Pomocou premennej si môžete akúkoľvek CSS vlastnosť pomenovať vlastným názvom a neskôr sa v zdrojovom kóde odkazovať na jej názov. Premenná sa definuje pomocou znaku dolár ($nazov). 

1. Príklad - Využitie pri farbách

V CSS je veľmi často opakujúcou sa vlastnosťou farba. Väčšinou máte na projekte grafikom zadefinovanú paletu farieb, ktorú v zdrojovom kóde pri štýlovaní využívate. Kto si však má pamätať všetky tie HEX kódy farieb? SASS Vám prácu s farbami výrazne zjednoduší. Stačí si farby zadefinovať a neskôr sa v kóde na ne odkazovať.

SASS Kód:

$farba-zelena: #a41c1c;
$farba-modra: #173bc2;

.box { border-color: $farba-zelena; }
.block { color: $farba-modra; }
.button { background-color: $farba-zelena; color: $farba-modra; }

Zadefinovali sme si dve premenné, $farba-zelena a $farba-modra. Potom sme sa v kóde pri ich použití odkázali na ich názov.

CSS Kód:

.box { border-color: #a41c1c; }
.block { color: #173bc2; }
.button { background-color: #a41c1c; color: #173bc2; }

Takto vyzerá výsledný zdrojový CSS kód po spracovaní. Namiesto použitých premenných sa vo výslednom CSS kóde zobrazia hodnoty farieb, ktoré boli zadané pri definovaní premenných.

"Neoceniteľnou výhodou pri používaní premenných je, že ak potrebujeme zrazu zmeniť farbu, nie je nutné meniť ju na všetkých miestach v CSS kóde. Stačí farbu zmeniť v SASS kóde, kde ste si ju pomocou premennej zadefinovali. Tá sa automaticky zmení na všetkých použitých miestach. No nie je to úžasné?"
2. Príklad - Využitie pri ceste k obrázkom

Ďalší šikovný spôsob využitia je zadefinovať si premennú, ktorá mi vráti cestu k obrázkom. Počas štýlovania veľakrát nastavujete elementom obrázok a cesta k nemu je častokrát dlhá a ťažko zapamätateľná.

SASS Kód:

$dir-img: "/templates/interway/assets/images/";

.box { background-image:url("#{ $dir-img }photo.png"); }

CSS Kód:

.box { background-image:url("/templates/interway/assets/images/photo.png"); }

Vo výslednom CSS kóde sa krátky názov premennej nahradí dlhým textovým reťazcom s cestou k obrázku.

"Častokrát sa nám na projekte stalo, že pri spúšťaní projektu do produkcie bolo potrebné zmeniť cesty k obrázkom, lebo sa menila adresárová štruktúra. Bola z nejakého dôvodu iná ako na vývojovom prostredí. Používanie premenných nám túto nepríjemnú situáciu zachránilo. Stačilo zmeniť cestu na jednom mieste a to sa odzrkadlilo všade, kde bola premenná použitá."

Importovanie externých súborov

Každý správny frontend web developer sa snaží pri vývoji webu prihliadať aj na rýchlosť načítavania stránky. Preto kvôli optimalizácií výkonu píše zdrojový kód (za ideálneho stavu) do jedného CSS súboru. Pri načítavaní stránky tak vzniká iba jedna požiadavka na server.

Problém však vzniká, ak na jednom projekte pracuje viacero web developerov. Každý z nich má u seba lokálne rozpracovanú verziu, štýluje nejakú časť stránky/modul. V jednom momente je potrebné všetky tieto lokálne verzie dať dokopy - zlúčiť štýly. Keďže sa všetky štýly nachádzajú v jednom súbore a každý má u seba inú verziu toho súboru, častokrát je veľký problém dať to dokopy.

SASS má na toto veľmi šikovné riešenie. Štruktúru štýlov si môžete rozdeliť do rôznych logických celkov. Povytvárať množstvo čiastočných súborov. Pomocou direktívy @import sa natiahnu všetky čiastkové súbory do jedného SASS súboru. Ten sa po spracovaní preprocesorom skompiluje do jedného CSS súboru.

Príklad ako sa dá štruktúra štýlov rozdeliť do rôznych logických celkov:

1-tools
    bootstrap, bourbon
2-helpers
    variables, mixins
3-basic
    body, buttons, links, typography, form, table
4-layout
    grid, header, footer
5-modules
    mega-menu, accordion, carousel, help-block, breadcrumb
6-pages
    homepage, subpage, product-detail

V súbore style.sass potom pomocou direktívny @import natiahneme všetky vytvorené čiastkové súbory:

// 1 - TOOLS
@import "1-tools/bourbon";
@import "1-tools/bootstrap";

// 2 - HELPERS
@import "2-helpers/variables";
@import "2-helpers/mixins";

// 3 - BASE
@import "3-base/body";
@import "3-base/buttons";
@import "3-base/links";
@import "3-base/typography";
@import "3-base/form";
@import "3-base/table";

// 4 - LAYOUT
@import "4-layout/grid";
@import "4-layout/header";
@import "4-layout/footer";

// 5 - MODULES
@import "5-modules/mega-menu";
@import "5-modules/accordion";
@import "5-modules/carousel";
@import "5-modules/help-block";
@import "5-modules/breadcrumb";

// 6 - PAGES
@import "6-pages/homepage";
@import "6-pages/subpage";
@import "6-pages/product-detail";

Výstupom po spracovaní kódu je jeden style.css súbor, čo znamená, že pri načítavaní stránky sa odošle iba jedna požiadavka na server. Úžasné, však?

"Pri kolaborácií viacerých vývojárov na jednom projekte nám vďaka direktíve @import nevznikajú komplikácie pri synchronizovaní verzií. Každý vývojár pracuje na inom celku webovej stránky, čiže upravuje iný SASS súbor. Tak tiež zdrojový kód , ktorý je rozdelený do malých celkov, je z dlhodobého hľadiska oveľa lepšie udržateľnejší a lepšie manažovateľný."

Na záver

SASS je veľmi silný nástroj. Všetky jeho vlastnosti sú užitočné a ich používanie je prudko návykové. My už si projekt bez použitia SASS ani nevieme predstaviť :) Ak ťa zaujal, určite to vyskúšaj. Zamiluješ si to.