Close Popup
Eng

SASS

2018.03.22

Ebben a cikkben a SASS (Syntactically Awesome Style Sheets) előnyeiről ejtünk pár szót.

Ebben a cikkben a SASS (Syntactically Awesome Style Sheets) előnyeiről ejtünk pár szót. Nem fogunk részletesen elmélyülni a technikai tudnivalókban, csak bemutatjuk pár előnyét egy-egy rövid példán keresztül. 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.

sass

@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.

egymasba agyazas_01


egymasba agyazas_02

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.
etjük az "&" használatát is, ami mindig a szülő selectorra utal.

mixinek

Ö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.

extend

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.

Kérj tőlünk ajánlatot, vedd fel velünk a kapcsolatot vagy keress minket e-mailben: hello@whiteelephant.digital!