U svetu web razvoja, najčešći način za stilizovanje web aplikacija je upotreba CSS-a. Međutim, CSS ponekad može biti komplikovan za rad, posebno kada je reč o pronalaženju i ispravljanju grešaka.
Upoznajte se sa Stilus CSS-om, koji predstavlja alternativu i jedan od popularnijih CSS preprocesora.
Šta je CSS preprocesor?
CSS preprocesori su alati koji pojednostavljuju pisanje CSS koda. Oni obično prevode kod iz sopstvene, prilagođene sintakse u .css format, koji web pregledači mogu da razumeju.
Preprocesori poput Sass-a nude napredne funkcionalnosti kao što su petlje, mixini, ugnežđeni selektori i if/else uslovi. Ove mogućnosti čine održavanje CSS koda jednostavnijim, naročito u okviru velikih timova.
Da biste koristili CSS preprocesor, morate instalirati kompajler na svom lokalnom računaru ili produkcijskom serveru. Neki alati za razvoj frontenda, kao što je Vite, omogućavaju da direktno uključite CSS preprocesore poput Less CSS-a u svoj projekat.
Kako funkcioniše Stylus CSS?
Za instalaciju Stylus-a na vašem lokalnom računaru, potreban vam je Node.js i Node Package Manager (NPM) ili Yarn. Pokrenite sledeću komandu u terminalu:
npm install stylus
Ili:
yarn add stylus
Svaka Stylus CSS datoteka ima ekstenziju .styl. Nakon što ste napisali Stylus CSS kod, možete ga kompajlirati pomoću ove komande:
stylus .
Ovo će kompajlirati sve .styl datoteke i izbaciti .css datoteke u trenutnom direktorijumu. Stylus kompajler omogućava i konverziju .css datoteka u .styl format, koristeći –css zastavicu. Za konverziju .css datoteke u .styl, koristite ovu komandu:
stylus --css style.css style.styl
Sintaksa i roditeljski selektori u Stylus CSS-u
U standardnom CSS-u, stilski blokovi se definišu pomoću vitičastih zagrada. Izostavljanje ovih znakova će dovesti do nepravilnog stila. U Stylus CSS-u, upotreba zagrada je opciona.
Stylus podržava sintaksu sličnu Python-u, što znači da blokove možete definisati koristeći uvlačenje, kao što je prikazano u primeru:
.container
margin: 10px
Gornji blok koda će se kompajlirati u sledeći CSS:
.container {
margin: 10px;
}
Slično kao u CSS preprocesorima kao što je Less, možete referencirati roditeljski selektor koristeći & simbol:
button
color: white;
&:hover
color: yellow;
Što se kompajlira u:
button {
color: #fff;
}button:hover {
color: #ff0;
}
Kako koristiti promenljive u Stylus CSS-u
U CSS preprocesorima kao što je Less CSS, promenljive se definišu pomoću @ simbola, dok tradicionalni CSS koristi „–“ za definisanje promenljive.
U Stylus-u je situacija malo drugačija: nije vam potreban poseban simbol za definisanje promenljive. Umesto toga, jednostavno definišete promenljivu koristeći znak jednakosti (=) da biste je povezali sa vrednošću:
bg-color = black
Sada možete koristiti ovu promenljivu u .styl datoteci na sledeći način:
div
background-color: bg-color
Gornji blok koda će se kompajlirati u sledeći CSS:
div {
background-color: #000;
}
Takođe možete definisati praznu promenljivu koristeći zagrade, na primer:
empty-variable = ()
Možete referencirati druge vrednosti svojstava koristeći @ simbol. Na primer, ako želite da podesite visinu div elementa na polovinu njegove širine, možete to učiniti na sledeći način:
element-width = 563pxdiv
width: element-width
height : (element-width / 2)
To bi funkcionisalo, ali možete izbeći kreiranje promenljive i umesto toga referencirati vrednost svojstva širine:
div
width: 563px
height: (@width / 2)
U ovom bloku koda, simbol @ vam omogućava da referencirate trenutnu vrednost širine svojstva div elementa. Bez obzira koji pristup odaberete, nakon kompajliranja .styl datoteke, trebali biste dobiti sledeći CSS:
div {
width: 563px;
height: 281.5px;
}
Funkcije u Stylus CSS-u
U Stylus CSS-u možete kreirati funkcije koje vraćaju vrednosti. Pretpostavimo da želite da postavite svojstvo poravnanja teksta div elementa na „center“ ako je širina veća od 400 piksela, ili „left“ ako je širina manja od 400 piksela. Možete kreirati funkciju koja upravlja ovom logikom:
alignCenter(n)
if (n > 400)
'center'
else if (n < 200)
'left'div {
width: 563px
text-align: alignCenter(@width)
height: (@width / 2)
}
Ovaj blok koda poziva funkciju alignCenter, prosleđujući vrednost širine svojstva koristeći @ simbol. Funkcija alignCenter proverava da li je njen parametar, n, veći od 400 i vraća „center“ ako jeste. Ako je n manje od 200, funkcija vraća „left“.
Nakon pokretanja kompajlera, trebalo bi da dobijete sledeći izlaz:
div {
width: 563px;
text-align: 'center';
height: 281.5px;
}
U većini programskih jezika, funkcije dodeljuju parametre na osnovu redosleda kojim ih prosleđujete. To može dovesti do grešaka usled prosleđivanja parametara u pogrešnom redosledu, što je verovatnije što više parametara morate da prosledite.
Stylus pruža rešenje: imenovane parametre. Koristite ih umesto uređenih parametara prilikom pozivanja funkcije, na primer:
subtract(b:30px, a:10px)
Kada koristiti CSS preprocesor?
CSS preprocesori su moćni alati koji vam mogu pomoći da pojednostavite svoj radni proces. Izbor pravog alata za vaš projekat može znatno poboljšati vašu produktivnost. Ukoliko je vašem projektu potreba samo mala količina CSS-a, korišćenje CSS preprocesora može biti nepotrebno.
Ako razvijate veliki projekat, možda kao deo tima, koji se oslanja na veliku količinu CSS-a, razmislite o korišćenju preprocesora. Oni nude funkcionalnosti kao što su funkcije, petlje i mixini, koji olakšavaju stilizovanje složenih projekata.