SASS + Compass használata a gyakorlatban

A SASS (Syntactically Awesome Stylesheets) egy olyan stíluskészítő script nyelv / fordító, ami az alap CSS által nyújtotta lehetőségeket kibővítve teszi lehetővé a hatékonyabb, átláthatóbb, dinamikusabb CSS fájlok készítését.

Talán mindenki, aki huzamosabb ideig foglalkozott sitebuildeléssel, előbb-utóbb elgondolkodott azon, hogy mennyivel jobb lehetne a munka a CSS-el, ha lehetne benne bizonyos dolgokat automatizálni, ciklusokat írni, illetve nem utolsó sorban kódrészleteket újra felhasználni.

Bizonyára ez motiválhatta a SASS készítőit is, amikor 2007-ben útjának indították a projektet, ami mára több társával együtt (LESS, Stylus, Tritium) a web fejlesztés egyik nélkülönözhetetlen eszközévé vált. 

 

 

Miről is szól ez az egész?

A SASS lényegében nem tér el az alap CSS szintaktikától, csak leegyszerűsíti és kibővíti azt. Ahhoz, hogy megértsük, miért is jó ez nekünk, kezdjük rögtön az alapoknál: a szintaktikánál.

A SASS-ban 2 féle szintaktika közül választhatunk. A kétféle kódolást onnan lehet legegyszerűbben megkülönböztetni, hogy az egyik .sass formátumban, a másik .scss formátumban íródik:

  • .sass – A régi SASS szintaktika. Fő különbség a CSS-hez képest, hogy elhagyja a { } ; jeleket, és helyettük indentelést, sortörést kell alkalmaznunk új blokkok, és szabályok létrehozásához. A másik szintaktikához képest eltér abban is, hogy leegyszerűsíti a parancsokat: @import helyett + , @mixin helyett = …
  • .scss – Az újabb szintaktika. Ez az alap CSS-hez közelebb álló nyelvezet. Lényegében az alap CSS írásától csak akkor tér el, ha elkezdünk SASS specifikus parancsokat, mixineket, nestelést,  extendelést alkalmazni.

 

A .sass vagy a .scss a jobb?

Ez csak rajtad áll. Az scss nagy előnye, hogy a megírt, letöltött CSS kódokat egy az egyben be lehet másolni, és úgy is valid marad, lefordul a fájl. A sass előnye pedig, hogy a nyitó és csukó jelek, sorvégi pontosvesszők elhagyásával megfelelő tagolással átláthatóbb és gyorsabb munkát tesz lehetővé. Részemről a sass és scss kódolást ugyanúgy kedvelem, ráadásul egyszerűen fordítható egyik a másikba, tehát csak rajtunk áll, melyiket akarjuk használni, a SASS ebben sem korlátoz le minket.

Ha létrehoztuk a fájltípust, amit választottunk, akkor a következő lépés, hogy beállítsuk a fordítót.

A fordító feladata nem más, mint a SASS fájlból CSS-t generálni. Mindezt automatikusan teszi, ha változtatunk a SASS fájlban és elmentjük, akkor automatikusan generálja a CSS-t. Ehhez nincs más dolgunk, mint kiadni egy figyelő parancsot, ami megmondja a fordítónak, hogy melyik fájlt / mappát figyelje és hova generáljon.

Ez az a pont ahol képbe jön a Compass. A Compass felfogható az alap SASS bővítményeként, egy keretrendszerként, melyben sok CSS3-as kódrészletet, automatikus sprite készítési lehetőséget, előre legyártott patterneket adtak hozzá az alap SASS-hoz, hogy még gördülékenyebbé tegyék a munkát.

 

Parancsoljatok!

Azt, hogy ez az egész mégis mennyire hasznos nekünk, a legjobban kódrészletekkel lehet demonstrálni, tehát az alábbiakban pár példával szemléltetem a compass/sass és a CSS közti különbségeket.
 

1. Egy minden sarkán máshogy lekerekített dobozt akarok létrehozni.

Play with this gist on SassMeister.

Ez a radiusos példa eléggé kisarkított, de látszik, hogy pusztán a prefixek elhagyásával mennyivel átláthatóbb a SASS a CSS-hez képest. Egy bonyolultabb CSS3-as animációnál pedig ez az egyszerűség életeket menthet.
 

2. Egy gombot kell formáznom, ami minden oldalon picit másként, néz ki.

Play with this gist on SassMeister.

Látszik, hogy ha a CSS-ünkbe egy kódot többször fel kell használnunk, és előfordulhat, hogy később mindegyiken változtatnunk kell, akkor érdemes mixin-eket, alkalmazni. Vannak olyan elemek a CSS-ben amikhez rögtön munkánk elején érdemes ilyen mixineket létrehozni , például clearfix, vagy reszponzív beállítások.
 

3. Különböző szín funkciók.

Play with this gist on SassMeister.

Egy designban legtöbbször 3-5 között vannak a felhasznált alapszínek. Ezekből általában minden más szín legyártható, kikeverhető. Nagyon sokat segít, ha később változtatni akarunk a színeken, hogy ezeket változókba mentjük és a kódolás során csak meghívjuk őket.

A másik dolog, amit szemléltet a példa, hogy mennyire egyszerű különböző szín manipulációkat végezni, sötétíteni, deszaturálni, színeket egymással keverni a SASS-ban.

 

Végezetül

Habár a bemutatott példák és ismertetés csak egy nagyon kis szelete annak, amit a SASS tud, és nem beszéltünk a különböző lehetőségekről (extend, function, operator, stb.), vagy a fordító egyéb beállításairól, ahogy arról sem hogyan fog az új verzió kooperálni a népszerű DevTools-al, remélem gondolatébresztőnek jó volt. Azoknak, akik még nem használtak ilyen eszközt a fejlesztés során, csak ajánlani tudom, hogy fedezzék fel a SASS által nyújtott lehetőségeket, mert rövid idő alatt be tud épülni a mindennapi munkába, és hamar fontos eleme lesz a sitebuild eszköztárunknak.

Ha tetszett ez a poszt, tarsatok velünk legközelebb is, ahol a SASS-al készült CSS keretrendszerekről lesz szó, illetve a SASS további funkióit fogjuk boncolgatni.

 

 

Lesd meg a SASS és Compassról szóló sorozatunk következő részét is!

 

0 hozzászólás
Összes mutatása

További olvasásra ajánljuk