Každý web developer, ktorý pracuje s front-endom, sa musí stretnúť aj so štýlovaním dizajnu stránky pomocou CSS. Avšak niekedy nám môže CSS trocha liezť na nervy s tým, že sa často niektoré štýly v kóde zbytočne opakujú. Preto dnes popíšem rozšírenie SASS a SCSS.

Predpokladám, že drvivá väčšina developerov už dávno využíva SASS, Less, alebo Stylus namiesto bežného CSS. Všetky spomenuté rozšírenia sú super a nám developerom skracujú čas kódenia. Avšak ja pracujem s SCSS (niečo ako odroda SASS), takže sa budem venovať len tomuto rozšíreniu. Pokiaľ ste developer a stále využívate len čisté CSS, budem rád, ak vám môj článok pomôže zmeniť pohľad na svet štýlovania :)

Čo ponúka SASS oproti čistému CSS?

Premenné, funkcie, matematické operácie, “nesting”, čiastočné súbory, import, dedičnosť… A s týmto všetkým sa dá veľmi dobre ušetriť čas už len z predstavy.

Rozdiel medzi SASS a SCSS

Ako som spomínal, ja osobne používam SCSS, čo je iný štýl písania SASS kódu. Prakticky sú takmer rovnaké, avšak pri SASS nemusíte písať bodkočiarky a kučeravé zátvorky. Tiež je veľa iných rozdielov (zjednodušené deklarovanie a volanie funkcií, import, extend...), takže to závisí aj od vkusu písania. Treba si však dať pozor, pretože nesting sa robí tabulátormi. Pre mňa je čitateľnejšie, keď sa nesting robí kučeravými zátvorkami. Pozrite sa na nasledujúce príklady:

1. Premenné

Predstavte si, že máte stránku, kde využívate jednu farbu viackrát. Teraz si klient zmyslí, že jeho stránka už nemá byť červená, ale čierna. V takom prípade vám to môže zabrať niekoľko minút a potom to všetko ešte prekontrolovať - jednoducho stratený čas. No pri SASS by vám to zabralo len pár sekúnd a môžete si byť istý, že sa všetko zmenilo správne (teda ak ste správne využili premenné). Porovnajte si nasledujúce prípady, ktoré sú oba identické, avšak prvý je SCSS a druhý je vygenerované CSS:

Určite ste si všimli, že som v SCSS použil kód rgba($defaultColor, 0.3). V SASS môžete zavolať pretypovanú funkciu rgba, do ktorej môžete vložiť farbu v HEX kóde (dokonca aj ako slovo, napríklad red) a ono si ju dokáže preložiť do RGB a nastaviť priesvitnosť. Úžasné, však?

2. Funkcie

“Funkcie” zrejme nie je to správne slovo. V skutočnosti ide o tzv. mixin, a preto sa nejedná o funkciu, ako je napríklad už spomínaná funkcia rgba. Mixin môže obsahovať kúsok kódu a tiež môže akceptovať argumenty a pracovať s ostatnými premennými. Tým, že nemusíme písať znova to isté, ušetríme veľa času a zároveň to nepôsobí chaosálne pri úprave. Predstavte si, že v prípade ako je v tomto príklade nižšie, by bolo treba zmeniť veľkosť písma. Je jednoduchšie zmeniť hodnotu raz, než pre každý element zvlášť.

3. Matematické operácie

SASS podporuje operácie +, -, *, / a % (modulo). Na nasledujúcom príklade ukážem ako tieto operácie využiť. Príklad: Hlavička stránky má určitú výšku a logo v nej bude zaberať polovicu výšky. Znova využijeme premenné.

Všimnite si, že SASS dokáže vydeliť číslo s hodnotou px. Teda berie hodnotu ako číslo, nie reťazec. Tiež automaticky doplní typ hodnoty. Rovnako to bude fungovať aj pri hodnotách ako %, em, rem, cm, pt…

4. Nesting

Ako ste si mohli všimnúť na všetkých príkladoch, všade som použil SCSS nesting. Napríklad v prvej ukážke premenných sa pri čistom CSS pre výber elementu v inom elemente použije dopyt #head .logo, zatiaľ čo v SCSS napíšeme blok štýlu .logo s dopytom vo vnútri bloku #head.

5. Čiastočné súbory

Nie všetky súbory sú potrebné na konvertovanie do CSS. Ak máte väčší projekt, každú sekciu si môžete rozdeliť na viacero menších, čiastočných súborov, ktoré budú obsahovať len štýly týkajúce sa danej sekcie. Nie je to povinné, ale odporúčané. Budete mať oveľa lepší prehľad o súboroch. Napríklad ja mám samostatný súbor pre naštýlovanie blogu, ďalší pre homepage a podobne. Tieto súbory sa pomenujú štýlom “_blog.scss”. S použitím podčiarkovníka bude súbor pri automatickej kompilácii ignorovaný, pretože dáva informáciu, že je súčasťou iného súboru. V hlavnom súbore sa potom volá cez import. To, či budú ignorované, záleží aj od softvéru na spracovanie SASS/SCSS kódu, k tomu sa však dostanem až v nasledujúcom článku.

6. Import

Ako som už spomínal v predchádzajúcej časti, svoj SCSS kód rozdeľujem do viacerých súborov a mám tak lepší prehľad o štýle webstránky. Mám tri vždy používané súbory - _constants.scss, _mixins.scss a main.scss. Podľa logiky čiastočných súborov sa kompiluje len súbor main.scss na súbor main.css. V ňom sa hneď v prvých riadkoch nachádza import týchto súborov - import “constants” a import “mixins”. Pri importe nie je potrebné zadať podčiarkovník a dokonca ani príponu .scss. Treba pamätať na postupnosť importnutých súborov, nakoľko v CSS má vyššiu prioritu štýl zadaný ako posledný, v prípade že sa dopyty zhodujú.

6.1. Priority

Keď už som spomenul prioritu štýlov, napíšem kúsok aj k prioritám. V CSS má väčšiu prioritu najväčší, resp. najšpecifickejší dopyt (napríklad .element < .rodic .element). Ďaľšia podmienka môže byť dopyt cez ID. Ak odkazujete na element vo vnútri iného elementu cez dopyt s ID, bude mať vyššiu prioritu aj keď nemusí byť tak špecificky zapísaný. Pozrite sa na nasledujúci kód. Aj keď je dopyt cez triedy vyzerá špecifickejšie, dopyt cez ID má vyššiu prioritu a teda farba textu v tomto príklade bude zelená.

Pri zhodných dopytoch “vyhráva” ten posledný zapísaný. Pri zhodných dopytoch vo viacerých súboroch “vyhráva” posledný načítaný. Viem, že toto je banalita, ktorú väčšina developerov už aj tak pozná, ale pár mojich známych, ktorí len začínajú s programovaním, to nepoznali a robili práve v tomto chyby, na ktoré sa ma pýtali.

V nasledujúcom článku budem pokračovať, spomeniem dedičnosť, kompilátory, bonusové mixins a ešte pár príkladov využitia SASS/SCSS v praxi.