A CSS-előfeldolgozók egyre inkább az elülső webfejlesztők munkafolyamatának fő támaszává válnak. A CSS hihetetlenül bonyolult és árnyalt nyelv, és a használat megkönnyítése érdekében a fejlesztők gyakran az olyan előfeldolgozók használatához fordulnak, mint a SASS vagy a LESS.
A CSS előkészítők lefordítják a kódot, amelyet egy speciális fordító segítségével írnak. Ezt követően CSS-fájlt hoznak létre, amelyre a fő HTML-dokumentum hivatkozhat.
Bármely CSS-előfeldolgozó használatakor a normál CSS-ben programozhat, ugyanúgy, mint ha az előfeldolgozó nincs a helyén. A jó dolog az, hogy több lehetőség is rendelkezésre áll. Egyesek, például a SASS, sajátos stílusszabványokkal rendelkeznek, amelyek a dokumentum megírását még könnyebbé teszik, például a zárójelek mellőzésének szabadsága, ha akarja.
Természetesen a CSS-előfeldolgozók más funkciókat is kínálnak. A kínált szolgáltatások közül sok hihetetlenül hasonló az előfeldolgozók között, a szintaxisban csak kis eltérések vannak. Így nagyjából bármelyiket kiválaszthatja, amire vágyik, és képes lesz arra, hogy ugyanazokat a dolgokat érje el. Néhány hasznosabb szolgáltatás a következő:
Változók
Bármelyik programnyelvben az egyik leggyakrabban használt elem a változó, amiről a CSS kifejezetten hiányzik. Azzal, hogy változók állnak rendelkezésére, egyszer meghatározhat egy értéket, és újból felhasználhatja, ha a teljes programban. Erre példa a SASS-ban:
$yourcolor: #000056 .yourDiv { color: $yourcolor; }A SASS yourcolorváltozó egyszeri deklarálásával ma már ugyanezt a színt újra felhasználhatja az egész dokumentumban anélkül, hogy a definíciót újra be kellene írnia.
Hurkok
A nyelvek másik gyakori eleme a hurkok, valami más hiányzik a CSS-ből. A hurkok segítségével ugyanazokat az utasításokat többször is megismételhetjük anélkül, hogy többször kellene újra beírni őket. Példa a SASS-ra:
@for $vfoo 35px to 85px { .margin-#{vfoo} { margin: $vfoo 10px; } }Ez a hurok megment minket attól, hogy ugyanazt a kódot többször is megírjuk a margó méretének megváltoztatásához.
If / Egyéb nyilatkozatok
Még egy olyan funkció, amely a CSS-től hiányzik, az If / Else utasítások. Ezek csak akkor futtatják az utasításokat, ha egy adott feltétel igaz. Erre példa a SASS-ban:
@if width(body) > 500px { background color: blue; } else { background color: white; }Itt a háttér színe megváltozik, az oldal törzsének szélességétől függően.
Ez csak néhány a CSS-előfeldolgozók fő funkcióiból. Mint látható, a CSS-előfeldolgozók hihetetlenül hasznos és sokoldalú eszközök. Sok webfejlesztő használja őket, és erősen ajánlott legalább egyet megtanulni.
Több információ:
- A legjobb CSS oktatóanyagok
- SASS-dokumentumok: //sass-lang.com/
- A SASS, az Ön webes előfeldolgozója
- KEVESEBB dokumentumok: //lesscss.org/
- Stylus dokumentumok: //stylus-lang.com/