Iránytű a keretrendszerekhez - SASS és Compass

Az előző részben nagy vonalakban szó volt a SASS és Compass alkalmazásában rejlő lehetőségekről. Néhány példán keresztül szemléltettem a SASS és a CSS közti kapcsolatot, és hogy miképp vet véget a Compass a CSS3-as parancsok monoton gépelésének.

A SASS-t azonban nem csupán egyedi stílusok gyártásához lehet használni, hanem ciklusok és fuction-ök segítségével saját "eszközöket" vagy akár egy komplett keretrendszert is készíthetünk magunknak.

 

Keretrendszerekről általánosságban

Ahogy a honlap készítés egyre komplexebb feladattá nőtte ki magát az évek során, úgy fejlődtek vele együtt az eszközök is. A responsive design elterjedése és az, hogy a mobilra optimalizálás manapság már a legtöbb esetben nem egy választható extra, hanem kötelező feladat, újabb lendületet adott a sitebuild folyamatot megkönnyíteni hivatott front-end keretrendszereknek.

Front-end keretrendszeren olyan eszközök, programkódok gyűjteményét értjük, amelyek a webfejlesztés során standardizálható lépésekhez nyújtanak segítséget. A legtöbb keretrendszer tartalmaz előre megírt grideket, navigáció, űrlap formázásokat, és minden olyan oldalelemhez kínál valamilyen megoldást, ami általánosnak tekinthető.

Azt, hogy ezek a keretrendszerek milyen népszerűek jól szemlélteti, hogy a (LESS felhasználásával írt) Bootstrap júniusban a Github legnépszerűbb projektje volt. Csak a Bootstrap közel 70 ezer kedvelést kapott, és több mint 25 ezer Github-os projektnél használták.

 

De hogy jön ide a SASS?

A legtöbb nagy front-end keretrendszer elkészítéséhez alkalmaztak valamilyen CSS fordítót, dinamikus stílusleíró nyelvet. A Bootstrap-hez LESS-t, míg a hasonlóan népszerű Foundation-höz és Groundwork CSS-hez a SASS-t hívták segítségül.

Nem meglepő ezeknek a nyelveknek a használata, hiszen keretrendszer készítésekor a dinamikusság és az újrafelhasználhatóság kulcskérdés, ahogy az is, hogy a struktúra és a fordítandó programkód átlátható, és könnyen értelmezhető legyen, míg a fordított fájl egyszerű és tömör.

 

Struktúra, komment, fordítás

Arra, hogy a stílust több fájlra bontsuk, és azokat egy gyűjtő fájlba meghívjuk már a CSS-ben is volt lehetőség. A SASS-ban viszont arra is van mód, hogy bizonyos fájlokat a fordító átugorjon, így még átláthatóbb mappa struktúrák és tagolás hozható létre. Az, hogy a fordítandó és lefordított fájlokat el lehet szeparálni egymástól sokkal átláthatóbb munkakörnyezetet eredményez.

Egy másik apró, de hasznos dolog, hogy a SASS-ban ( // jellel )  írt kommentek a CSS-ben nem fordítódnak le. Kisregényt írni a kommentekben itt sem érdemes, de bátrabban használhatják a fejlesztők, hiszen kommentjeiket csak a nyers SASS fájl birtokában olvashatják el.

A fordító konfigurálhatóságát szintén érdemes megemlíteni. Segítségével beágyazott, egyszerű, vagy tömörített CSS fájlok generálására is mód van. A kép, font, és js, illetve gyökér útvonalak beállításával szintén megkönnyíthetjük a dolgunk. A line_comments bekapcsolásával a fordításkor az adott selector felett egy komment íródik a CSS fájlba, mely tartalmazza, hogy az adott selectorra melyik fájl hányadik sorában hivatkoztunk, így ha mondjuk DevTools-ban vagy Firebuggal vizsgáljuk a css-t , tudni fogjuk, hogy hol írtuk a szabályt a SASS-ban. Az újabb verziókban erre egy elegánsabb source-map-es megoldás is lesz, de erről majd később.

 

Lássuk azokat a kódokat!

A teljesség igénye nélkül most két egyszerűbb példát hoztam. Az egyik a Compass-os font-face mixinhez hasonlít, a másik pedig egy Foundation-ből kiragadott kódrészlet lesz.

Play with this gist on SassMeister.

Ezzel a sass fájllal szerettem volna lerövidíteni az egyedi fontok importálásának mizériáját. Egy olyan saját keretrendszerhez készült, ahol a változókat egy _settings.sass fájlban lehet konfigurálni, így ha nincs szükség egyedi fontokra, vagy az importálás máshogy történik, akkor elég false-ra állítani a változót és a kód nem fordul le.

 

Play with this gist on SassMeister.

Ez a Foundation-höz írt rem kalkulátor funkció, és egy példa az alkalmazására. Hasonló funkciókat tartalmaz a Compass is például százalék számításhoz.  

 

Végezetül

Ebbe a cikkbe a funkciók mélyebb boncolgatása már nem fért bele, de hasonló példákért érdemes felkeresni az említett keretrendszerek oldalait Github-on, ahol a többek között a grid és selector generáláshoz, illetve általános honlap elemek formázásához rengeteg hasonló megoldást lehet találni.

Remélem találtaltok hasznos/érdekes információkat ebben a cikkben is. Tartsatok velünk a sorozat következő részében is ahol picit a száraz kódokat hátrahagyva a SASS és Compass jövőjéről és pár ehhez kapcsolódó igazi scifi-be illő fejlesztői eszközről, lehetőségekről lesz szó.

 

Olvasd el a SASS és Compassról szóló sorozatunk első részét is!

 

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

További olvasásra ajánljuk