SASS

(Syntactically Awesome Style Sheets)


Ebben a cikkben a SASS (Syntactically Awesome Style Sheets) előnyeiről ejtünk pár szót.
Nem fogunk részletesen belemenni a technikai dolgokba, csak rátérünk pár előnyre egy-egy rövid példával.
A cikk értelmezéséhez alapvető CSS tudás szükséges.

A stíluslapok (CSS) a weboldalunk megjelenéséért felelős fájlok, melyekben definiáljuk az oldalon elhelyezett elemek kinézetét (betűszín, betűméret, háttérszín, méretek stb.).
A SASS egy preprocesszor ami lehetővé teszi, hogy változókat, ciklusokat, mixineket és egyéb olyan fejlesztést könnyítő eszközöket használjunk, amik képesek lecsökkenteni a fejlesztési időt és megkönnyíteni a munkánkat.

Ebből a ".sass", vagy ".scss" fájlból generálódik (compile) a böngészők számára értelmezhető ".css" fájl (az általunk bemutatott példában .scss).
Mindegyik részhez tartozik egy screenshot, amin látható a sass (scss) és a belőle generált css kód, ezzel segítve a működés értelmezését.


Változók

Képzeljünk el egy esetet, amikor megírtuk a stíluslapot, de az utolsó pillanatban az összes felhasznált színt és betűtípust le kell cserélnünk a több száz (vagy több ezer) soros CSS fájlunkban.
Erre az esetre hasznos a változók használata, hiszen ilyenkor elegendő az értéket egyetlen helyen átírnunk és a probléma meg is oldódott.

@Import

CSS fájlokban általában igyekszünk elkerülni az import használatát, mivel ilyenkor új http requestet generálva hívódik meg egy másik külső stíluslap.
Ezzel szemben SASS használatakor az @import behúzza a másik fájl tartalmát majd ezután egy ".css" fájlba generálódnak a tartalmak.
Így nyílik lehetőség arra, hogy a logikailag nem összetartozó dolgokat külön fájlokba rendszerezzük.


Egymásba ágyazás

SASS használatával megtehetjük, hogy egymásba ágyazunk selectorokat.
Ez segíthet a kódunkat jobban átláthatóvá, könnyebben szerkeszthetővé tenni, de fontos megjegyezni, hogy egy bizonyos beágyazási mélység után ez inkább árthat, mint használ.
Azt tanácsoljuk, hogy a 3 szintnél mélyebb beágyazásokat mellőzzük, mert a kód nehezen értelmezhetővé válhat.
A példában szemléltetjük az "&" használatát is, ami mindig a szülő selectorra utal.





Mixinek

A mixinek CSS deklaráció blokkok, amiket újra felhasználhatunk.
Ez rengeteg felesleges plusz gépeléstól megkíméli a fejlesztőt.
Egy mixin képes paraméterek befogadására, illetve a paraméter kaphat alapértelmezett értéket is.
Alapvetően a legenerált ".css" fájlban a mixinek nem láthatóak, csak akkor ha @include segítségével valahol meghívjuk őket.

Öröklés / Extend


Elérkeztünk az egyik leghasznosabb előnyhöz, amivel képesek vagyunk egy selector tulajdonságait lényegében lemásolni, rengeteg gépeléstől megkímélve magunkat.

Illetve lehetőségünk van a mixinekhez hasonlóan újrafelhasználható blokkokat létrehozni, azzal az egyetlen különbséggel, hogy ezek nem képesek paraméterek fogadására.
Alapvetően a legenerált ".css" fájlban nem láthatóak ezek a blokkok, csak akkor ha @extend segítségével valahol meghívjuk őket.


Ezek azok az alapvető dolgok, amiket érdemes tudni ahhoz, hogy valaki elkezdje használni ezt a preprocesszort és élvezhesse az előnyeit.
Természetesen ennél jóval több mindenre képes, de reméljük, hogy már ennyivel is meghozzuk pár ember kedvét a kipróbálására.

Hírlevél feliratkozás

* kötelező mezők