Što je Stylus CSS i kako ga koristiti?

Kada je riječ o web razvoju, najčešći način oblikovanja aplikacije je korištenje CSS-a. Međutim, rad s CSS-om može biti težak jer je poznato da ga je teško ispraviti.

Naučite kako koristiti Stylus CSS i imat ćete drugu opciju, s jednim od najpopularnijih dostupnih CSS predprocesora.

Što je CSS pretprocesor?

CSS predprocesori su pomoćni programi koji olakšavaju pisanje CSS-a. Oni često kompiliraju kod iz vlastite prilagođene sintakse u .css format koji preglednici mogu razumjeti.

CSS predprocesori kao što je Sass, na primjer, nude posebne značajke kao što su petlje, mixini, ugniježđeni selektori i if/else izjave. Ove značajke olakšavaju održavanje vašeg CSS koda, posebno u velikim timovima.

Da biste koristili CSS procesor, morate instalirati kompajler u vašem lokalnom okruženju i/ili proizvodnom poslužitelju. Neki alati za izradu sučelja, poput Vitea, omogućuju vam uključivanje CSS predprocesori poput LessCSS-a u vašem projektu.

Kako radi Stylus CSS

Da biste instalirali Stylus u vašem lokalnom okruženju, trebate Node.js i bilo koji Node Package Manager (NPM) ili Yarn instaliran na vašem stroju. Pokrenite sljedeću naredbu terminala:

npm instalirajte olovku

Ili:

pređa dodati olovku

Svaka Stylus CSS datoteka završava s a .stil proširenje. Nakon što napišete svoj Stylus CSS kod, možete ga kompajlirati ovom naredbom:

igla .

Ovo bi trebalo kompilirati sve .stil datoteke i izlaz .css datoteke u trenutnom direktoriju. Stylus kompajler također omogućuje kompajliranje .css datoteke u .stil s --css zastava. Za pretvorbu a .css datoteku u .stil format, koristite ovu naredbu:

olovka --css stil.css stil.stil

Sintaksa i roditeljski birači u Stylus CSS-u

U tradicionalnom CSS-u definirate stilski blok pomoću zagrada; neuspjeh uključivanja ovih znakova dovest će do pokvarenih stilova. U Stylus CSS-u korištenje zagrada nije obavezno.

Stylus podržava sintaksu sličnu Pythonu, što znači da umjesto toga možete definirati blokove pomoću uvlaka, ovako:

.kontejner
margina: 10px

Gornji blok koda kompajlira se u sljedeći CSS:

.kontejner {
margina: 10px;
}

Baš kao u CSS predprocesorima kao što je Less, možete referencirati nadređeni selektor pomoću & lik:

dugme
boja: bijela;
 &:lebdjeti
boja: žuta boja;

Koji se kompilira u:

dugme {
boja: #F F F;
}
dugme:lebdjeti {
boja: #ff0;
}

Kako koristiti varijable u Stylus CSS-u

U CSS predprocesorima kao što je Less CSS, definirate varijable s @ lik, dok tradicionalni CSS koristi "--" za definiranje varijable.

U Stylusu su stvari malo drugačije: ne treba vam poseban simbol za definiranje varijable. Umjesto toga, samo definirajte varijablu koristeći znak jednakosti (=) da ga vežete za vrijednost:

bg-boja = crno

Sada možete koristiti varijablu u .stil ovakva datoteka:

div
boja pozadine: bg-boja

Gore navedeni blokovi koda kompiliraju se u sljedeći CSS:

div {
boja pozadine: #000;
}

Null varijablu možete definirati zagradama. Na primjer:

prazna-varijabla = ()

Možete referencirati druge vrijednosti svojstava pomoću @ simbol. Na primjer, ako želite postaviti visinu diva na polovicu njegove širine, možete učiniti sljedeće:

element-width = 563px
div
širina: element-width
visina: (element-width / 2)

To bi funkcioniralo, ali također možete u potpunosti izbjeći stvaranje varijable i uputiti na širina umjesto toga vrijednost svojstva:

div
širina: 563px
visina: (@širina / 2)

U ovom bloku koda, @ simbol vam omogućuje referencu na stvarni širina vlasništvo na div. Bez obzira na pristup koji odaberete, kada sastavljate .stil datoteku, trebali biste dobiti sljedeći CSS:

div {
širina: 563px;
visina: 281.5 px;
}

Funkcije u Stylus CSS-u

Možete stvoriti funkcije koje vraćaju vrijednosti u Stylus CSS-u. Recimo da želite postaviti poravnanje teksta svojstvo diva za "centriranje" ako širina je veći od 400px ili "lijevo" ako je širina manji je od 400px. Možete stvoriti funkciju koja upravlja ovom logikom.

alignCenter(n)
ako (n > 400)
 'centar'
drugoako (n < 200)
 'lijevo'
div {
širina: 563px
poravnanje teksta: alignCenter(@širina)
visina: (@širina / 2)
}

Ovaj blok koda naziva alignCenter funkcija, prolazeći širina vrijednost imovine upućivanjem na nju s @ simbol. The alignCenter funkcija provjerava je li njezin parametar, n, veći je od 400 i vraća "centar" ako jest. Ako n manji od 200, funkcija vraća "lijevo".

Kada se prevodilac pokrene, trebao bi proizvesti sljedeći izlaz:

div {
širina: 563px;
poravnanje teksta: 'centar';
visina: 281.5 px;
}

U većini programskih jezika funkcije dodjeljuju parametre na temelju redoslijeda kojim ih dajete. To može dovesti do pogrešaka kao rezultat prosljeđivanja parametara pogrešnim redoslijedom, što je vjerojatnije što više parametara morate proslijediti.

Stylus nudi rješenje: imenovani parametri. Koristite ih umjesto uređenih parametara kada pozivate funkciju, ovako:

oduzeti(b:30 px, a:10px)/*-20px*/

Kada koristiti CSS predprocesor

CSS predprocesori su vrlo moćni uslužni programi koje možete koristiti za pojednostavljenje tijeka rada. Odabir pravog alata za vaš projekt može poboljšati vašu produktivnost. Ako vaš projekt treba samo malu količinu CSS-a, onda bi korištenje CSS predprocesora moglo biti pretjerano.

Ako gradite veliki projekt, možda kao dio tima, koji se oslanja na veliku količinu CSS-a, razmislite o korištenju pretprocesora. Nude značajke kao što su funkcije, petlje i mixini koji olakšavaju stiliziranje složenih projekata.