Miért jó CSS preprocesszort használni egy igazán ütős reszponzív weboldal készítésekor?

A munkafolyamataimat szeretem a lehető legkevesebb külső eszközzel kiegészíteni, a "kevesebb több" elv híve vagyok. Azonban olykor találok olyan segítőket, amik egyértelműen megérik a beállítás és betanulás okozta plusz vesződséget, mert hosszú távon megkönnyítik és hatékonyabbá teszik a munkát.

Többször előfordult már, hogy a kiválasztott brand szín nem tetszett a megrendelőnek. Ilyenkor mi a teendő? Elő a .css fájl, majd egy keresés-és-csere kombinációval a korábbi színkódot lecserélem az újra. Ha esetleg a különféle színvariánsokat is cserélnem kell (linkek, hátterek, stb.), akkor ugyanígy keresés-és-csere, ismételve minden színvariációra, majd mentés, és ezt követően máris kész a változtatás - elég macerás, ha egy szín több verziójával is dolgozunk.

Mi lenne, ha azt mondanám, van egy egyszerűbb módszer? Nos, igen, jól sejted, itt jön képbe a SASS, ami egy CSS preprocesszor (jaj!). A segítségével "felokosíthatjuk" a .css fájljainkat: megadhatunk bennük változókat, számításokat végezhetünk, mixineket (stílusblokkok újrahasznosítható összessége) használhatunk - ezek mind megkönnyítik a munkát. Hogy miért?

Tegyük fel, van egy oldalunk, a .css fájljának egy részlete látható alább:

A // részek ki vannak kommentelve, azokat nem veszi figyelembe a böngésző, viszont nekünk segít az értelmezésben. A fenti részlet elég átlátható, viszont vannak benne ismétlések, amiket keresés-és-cserével kellene cserélnünk egy változás esetében. Írjuk át ezt a kódot (az áttekinthetőség miatt) SCSS (a SASS CSS-re hasonlító szintaxisa) formába, hogy lássuk, mit is könnyít meg a munkán a SASS.

A beágyazásokat a preprocesszor "kibontja", és átírja a fent már felírt alakra, valamint az egyes változókat is behelyettesíti és az értéküket írja a helyükre. Ha számolnivaló akad, azt a műveletet is elvégzi, és csak a végeredményt írja be a megadott helyre, de ha színekkel "végzünk műveletet" (pl. a brand szín egy sötétebb árnyalatát használnánk), ezzel is megbirkózik. Ezt követően ha változtatnunk kell bármelyik jellemzőn is, akkor elég csak az .scss fájl fejlécében átírni az értékeket és az "végigfut" a teljes dokumentumon: ha pl. a színeken változtatnánk, akkor az adott szín összes változatát egyszerre változtatja meg.

Vegyünk egy bonyolultabb példát: gombokat szeretnék készíteni. Erre a legegyszerűbb módszer, ha kettébontom a gomb jellemzőit: egy általános részre, ami az összes gombra igaz lesz, és egy specifikusra, ami az adott színezésű gombra fog vonatkozni:

Ennek hatására lesz egy piros gombom. Rendben, ez így nem tűnik bonyolultnak, viszont több színre is szükségünk lehet, ezért bővítjük a kódot:

Látható, hogy elkezdtünk ismételni egy mintázatot: az összes gombnál csak ugyanazokat a tulajdonságokat változtatjuk meg, és az értékek jellemzően megegyeznek (tehát ebben az esetben a border-color mindig ugyanolyan, mint a background-color). Foglalkozzunk egyelőre csak eggyel, a piros gombunkkal! A fenti kódot tovább kell bővíteni, mert nem csak az alapállapotot, hanem azt is le kell szabályoznunk, amikor az egér a gomb felett van (az egyszerűség kedvéért most csak ezt), erre szolgál a :hover selector:

Ez eddig 33 sor, kezdjük el átírni SASS-ba:

Itt a SASS verzió 44 sorra hízott szemben a normál CSS 33 sorával. De mi történik, ha visszahozzuk a többi gombot is? Nézzük (az értékeket nem írtam be, de oda nyugodtan képzeljünk bármilyen tetszőleges értéket):

CSS: 94 sor, SASS: 58 sor. Látszik, hogy a kód összetettségével elkezdett a korábban bonyolultabb megoldás jelentős egyszerűsítést hozni, és ugyanazt az eredményt majdnem feleannyi sorban tudja produkálni.

Összefoglalva tehát látható, hogy:

• sokkal tömörebb a kód,
• a változók egy helyen kerülnek definiálásra, így nem kell emlékeznünk az értékekre, elég csak a változó nevét beírni,
• nem kell sokszor ugyanazt (pl.: az article selectort) többször leírnunk, mert a beágyazásoknak köszönhetően ez automatikusan lekezelésre kerül

A cikkben csak a SASS-szal foglalkoztam, mert ez a legelterjedtebb CSS preprocesszor, de létezik több másik is - a teljesség igénye nélkül néhány: LESS, Stylus, CSS-Crush, Myth, Rework.