Kas ir Stylus CSS un kā to izmantot?

Runājot par tīmekļa izstrādi, visizplatītākais lietojumprogrammas stila veidošanas veids ir izmantot CSS. Tomēr darbs ar CSS var būt apgrūtinošs, jo to ir ļoti grūti atkļūdot.

Uzziniet, kā izmantot Stylus CSS, un jums būs vēl viena iespēja ar vienu no populārākajiem pieejamajiem CSS priekšapstrādātājiem.

Kas ir CSS priekšprocesors?

CSS priekšprocesori ir utilītas, kas atvieglo CSS rakstīšanu. Viņi bieži apkopo kodu no savas pielāgotās sintakses uz .css pārlūkprogrammām saprotamā formātā.

CSS priekšapstrādātāji, piemēram, Sass, piemēram, piedāvā īpašas funkcijas, piemēram, cilpas, mixins, ligzdotos atlasītājus un if/else paziņojumus. Šīs funkcijas atvieglo CSS koda uzturēšanu, īpaši lielās komandās.

Lai izmantotu CSS procesoru, jums ir jāinstalē kompilators vietējā vidē un/vai ražošanas serverī. Daži priekšgala veidošanas rīki, piemēram, Vite, ļauj iekļaut CSS priekšapstrādātāji, piemēram, LessCSS savā projektā.

Kā darbojas Stylus CSS

Lai instalētu Stylus savā lokālajā vidē, ir nepieciešams Node.js un vai nu Mezglu pakotņu pārvaldnieks (NPM) vai jūsu mašīnā instalēta dzija. Palaidiet šādu termināļa komandu:

npm instalējiet irbuli

Vai:

dzija pievieno irbuli

Katrs Stylus CSS fails beidzas ar a .stil pagarinājumu. Kad esat uzrakstījis Stylus CSS kodu, varat to apkopot ar šo komandu:

irbulis .

Tam vajadzētu apkopot visu .stil faili un izvade .css failus pašreizējā direktorijā. Stylus kompilators ļauj arī kompilēt .css failus .stil Ar --css karogs. Lai pārvērstu a .css failu uz .stil formātā, izmantojiet šo komandu:

irbulis --css style.css style.styl

Sintakse un vecāku atlasītāji programmā Stylus CSS

Tradicionālajā CSS jūs definējat stila bloku ar lencēm; Ja šīs rakstzīmes netiks iekļautas, stili tiks bojāti. Programmā Stylus CSS lencēšu izmantošana nav obligāta.

Stylus atbalsta Python līdzīgu sintaksi, kas nozīmē, ka varat definēt blokus, tā vietā izmantojot atkāpes, piemēram:

.konteiners
starpība: 10px

Iepriekš minētais koda bloks tiek kompilēts šādā CSS:

.konteiners {
starpība: 10px;
}

Tāpat kā CSS priekšapstrādātājos, piemēram, Less, varat atsaukties uz vecāku atlasītāju ar & raksturs:

pogu
krāsa: balts;
 &:virziet kursoru
krāsa: dzeltens;

Kas apkopo, lai:

pogu {
krāsa: #fff;
}
pogu:virziet kursoru {
krāsa: #ff0;
}

Kā lietot mainīgos Stylus CSS

CSS priekšprocesoros, piemēram, Less CSS, jūs definējat mainīgos ar @ raksturs, savukārt tradicionālajā CSS mainīgā definēšanai izmanto "--"..

Izmantojot Stylus, lietas ir nedaudz atšķirīgas: jums nav nepieciešams īpašs simbols, lai definētu mainīgo. Tā vietā vienkārši definējiet mainīgo, izmantojot vienādības zīmi (=), lai saistītu to ar vērtību:

bg-krāsa = melns

Tagad varat izmantot mainīgo mapē .stil šāds fails:

div
fona krāsa: bg-krāsa

Iepriekš minētie kodu bloki tiek kompilēti šādā CSS:

div {
fona krāsa: #000;
}

Jūs varat definēt nulles mainīgo ar iekavām. Piemēram:

tukšs-mainīgais = ()

Varat atsaukties uz citām īpašuma vērtībām, izmantojot @ simbols. Piemēram, ja vēlaties iestatīt div augstumu uz pusi no tā platuma, varat rīkoties šādi:

elementa platums = 563px
div
platums: elementa platums
augstums: (elementa platums / 2)

Tas darbotos, taču varat arī izvairīties no mainīgā izveidošanas pavisam un atsaukties uz platums īpašuma vērtība vietā:

div
platums: 563px
augstums: (@platums / 2)

Šajā koda blokā @ simbols ļauj atsaukties uz faktisko platums īpašums uz div. Neatkarīgi no izvēlētās pieejas, kad apkopojat .stil failu, jums vajadzētu iegūt šādu CSS:

div {
platums: 563px;
augstums: 2810,5 pikseļi;
}

Funkcijas Stylus CSS

Stylus CSS varat izveidot funkcijas, kas atgriež vērtības. Pieņemsim, ka vēlaties iestatīt teksta līdzināšana īpašība div uz "centru", ja platums ir lielāks par 400 pikseļiem vai “pa kreisi”, ja platums ir mazāks par 400 pikseļiem. Varat izveidot funkciju, kas apstrādā šo loģiku.

alignCenter(n)
ja (n > 400)
 'centrs'
citsja (n < 200)
 'pa kreisi'
div {
platums: 563px
teksta līdzināšana: alignCenter(@platums)
augstums: (@platums / 2)
}

Šis koda bloks izsauc alignCenter funkciju, nokārtojot platums īpašuma vērtību, atsaucoties uz to ar @ simbols. The alignCenter funkcija pārbauda, ​​vai tās parametrs, n, ir lielāks par 400 un atgriež "centru", ja tāds ir. Ja n ir mazāks par 200, funkcija atgriež "pa kreisi".

Kad kompilators darbojas, tam jārada šāda izvade:

div {
platums: 563px;
teksta līdzināšana: 'centrs';
augstums: 2810,5 pikseļi;
}

Lielākajā daļā programmēšanas valodu funkcijas piešķir parametrus, pamatojoties uz secību, kādā jūs tos sniedzat. Tas var izraisīt kļūdas, ja parametri tiek nodoti nepareizā secībā, kas, visticamāk, ir, jo vairāk parametru jums ir jānokārto.

Irbulis nodrošina risinājumu: nosauktie parametri. Izmantojiet tos sakārtotu parametru vietā, kad izsaucat funkciju, piemēram:

atņemt(b:30 pikseļi, a:10px)/*-20px*/

Kad izmantot CSS priekšapstrādātāju

CSS priekšprocesori ir ļoti jaudīgas utilītas, ko varat izmantot, lai racionalizētu savu darbplūsmu. Pareiza rīka izvēle savam projektam var palīdzēt uzlabot jūsu produktivitāti. Ja jūsu projektam ir nepieciešams tikai neliels CSS daudzums, CSS priekšapstrādātāja izmantošana var būt pārmērīga.

Ja veidojat lielu projektu, iespējams, kā komandas daļu, kas paļaujas uz milzīgu CSS daudzumu, apsveriet iespēju izmantot priekšapstrādātāju. Tie piedāvā tādas funkcijas kā funkcijas, cilpas un kombinācijas, kas atvieglo sarežģītu projektu veidošanu.