Miért jó az SCSS?

A korábbinál nagyobb hangsúlyt fektetünk HTML/CSS alapképzésünkön az SCSS vagy SASS technológiára. Sőt, már 2023 szeptemberétől ennek megfelelően oktatunk. 

Szeptembertől már nagyobb hangsúlyt fektetünk az SCSS-re a front-end alapképzésünkön. Az SCSS ugyanis egyre népszerűbb a fejlesztők körében, a modern webfejlesztésben egyre gyakrabban használtak ezek a technológiák.

Mi az az SCSS?

Az SCSS valójában a CSS továbbfejlesztése, segítségével olyan dolgokat tudunk megvalósítani, amit a sima CSS-ben nem, vagy csak igen körülményesen. Általában az az elképzelés az SCSS mögött, hogy legyen kevesebb "beégetett" adat, tehát minden olyan adat, ami konkrétan be van írva a CSS fileba. Például egy színre változóként hivatkozunk, majd amikor megváltoztatjuk ennek a változónak az értékét, akkor az egész weblapon lecserélődik a szín. 

Mivel tud többet az SCSS?

Néhány példa, amiben az SCSS felülmúlja a CSS-t:

1. Újrafelhasználható CSS kódsorozatokat hozhatunk létre, tehát CSS beállításoknak adhatunk egy "nevet", amit utána újra és újra felhasználhatunk.

2. Külső változókat is tudunk vele kezelni, és a változók alapján tudjuk meghatározni, hogy az adott CSS modifikáció megtörténjen-e vagy sem. 

3. A kódunk külső fileokból származó CSS információkat is le tud futtatni, vagy esetleg örökléssel átadni.

4. Komplexebb számításokat is eltudunk végezni SCSS-sel, egész képleteket írhatunk például a paddingok, margin-ok és pozíciók kiszámítására

5. Automatikus kód tömörítés a prepocesszor által, ld. lent.

És ez csak pár hasznos feature a sokból, érdemes megtanulni, ráadásul nem is túl nagy idő befektetés: ahhoz képest, hogy mennyi idő megtanulni a CSS-t, ez után még kb 10% időt kell fordítanod az SCSS megismerésére.

Az SCSS használata "mellékhatásként" rövidebbé és jobban átláthatóvá teszi a CSS fileunkat, ami nem egy hátrány, ha több webfejlesztő is dolgozik egy projekten. Sajnos a böngésző nem tudja közvetlenül értelmezni az .scss kiterjesztésű fájlokat, ezért előtte egy segédprogrammal át kell alakíttatni .css kiterjesztésű fájlra. Extra előnye ennek a segédprogramnak (prepocesszornak), hogy automatikusan tömöríti is a generált CSS filet.