Mis on Stylus CSS ja kuidas seda kasutada?

Kui rääkida veebiarendusest, siis kõige levinum viis rakenduse stiili kujundamiseks on CSS-i kasutamine. CSS-iga võib aga töötada tülikas, kuna seda on kurikuulsalt raske siluda.

Siit saate teada, kuidas kasutada Stylus CSS-i, ja teil on üks populaarsemaid saadaolevaid CSS-i eelprotsessoreid.

Mis on CSS-i eelprotsessor?

CSS-i eelprotsessorid on utiliidid, mis muudavad CSS-i kirjutamise lihtsamaks. Nad koostavad sageli koodi oma kohandatud süntaksist .css vormingus, millest brauserid aru saavad.

CSS-i eelprotsessorid, nagu Sass, pakuvad näiteks erifunktsioone, nagu tsüklid, miksinid, pesastatud valijad ja if/else laused. Need funktsioonid muudavad teie CSS-koodi haldamise lihtsamaks, eriti suurtes meeskondades.

CSS-protsessori kasutamiseks peate installima kompilaatori oma kohalikku keskkonda ja/või tootmisserverisse. Mõned kasutajaliidese koostamise tööriistad (nt Vite) võimaldavad teil kaasata CSS-i eelprotsessorid nagu LessCSS oma projektis.

Kuidas Stylus CSS töötab

Pliiatsi installimiseks kohalikku keskkonda vajate Node.js-i ja kumbagi Sõlme paketihaldur (NPM) või teie masinasse paigaldatud lõng. Käivitage järgmine terminali käsk:

npm install pliiats

Või:

lõng lisa pliiats

Iga Stylus CSS-fail lõpeb tähega a .styl pikendamine. Kui olete oma Stylus CSS-koodi kirjutanud, saate selle kompileerida järgmise käsuga:

pliiats .

See peaks koostama kõik .styl failid ja väljund .css failid praeguses kataloogis. Styluse kompilaator võimaldab ka kompileerimist .css failid sisse .styl koos --css lipp. Teisendamiseks a .css faili .styl vormingus, kasutage seda käsku:

pliiats --css style.css style.styl

Süntaks ja vanemavalijad Stylus CSS-is

Traditsioonilises CSS-is määrate stiiliploki sulgidega; nende märkide kaasamata jätmine toob kaasa katkised stiilid. Stylus CSS-is on trakside kasutamine valikuline.

Stylus toetab Pythoni sarnast süntaksit, mis tähendab, et saate määrata plokke, kasutades selle asemel taandeid, näiteks järgmiselt:

.konteiner
marginaal: 10px

Ülaltoodud koodiplokk kompileerub järgmiseks CSS-iks:

.konteiner {
marginaal: 10px;
}

Nii nagu CSS-i eeltöötlejate puhul, nagu Less, saate viidata vanemavalijale nupuga & tegelane:

nuppu
värvi: valge;
 &:hõljuma
värvi: kollane;

Mis kompileerib:

nuppu {
värvi: #fff;
}
nuppu:hõljuma {
värvi: #ff0;
}

Muutujate kasutamine Stylus CSS-is

CSS-i eelprotsessorites (nt Less CSS) saate muutujad defineerida nupuga @ iseloom, samas kui traditsiooniline CSS kasutab muutuja määratlemiseks "--"..

Styluses on asjad veidi teisiti: muutuja määratlemiseks pole vaja spetsiaalset sümbolit. Selle asemel määra lihtsalt muutuja võrdusmärgi (=), et siduda see väärtusega:

bg-värv = must

Nüüd saate muutujat kasutada failis .styl selline fail:

div
taustavärv: bg-värv

Ülaltoodud koodiplokid kompileeritakse järgmisele CSS-ile:

div {
taustavärv: #000;
}

Nullmuutuja saate defineerida sulgudega. Näiteks:

tühi-muutuja = ()

Saate viidata teistele atribuutide väärtustele, kasutades @ sümbol. Näiteks kui soovite määrata div kõrguseks poole selle laiusest, saate teha järgmist.

elemendi laius = 563px
div
laius: elemendi laius
kõrgus: (elemendi laius / 2)

See toimiks, kuid võite ka vältida muutuja loomist täielikult ja sellele viidata laius vara väärtus selle asemel:

div
laius: 563px
kõrgus: (@laius / 2)

Selles koodiplokis on @ sümbol võimaldab viidata tegelikule laius kinnistul div. Olenemata valitud lähenemisviisist, kui koostate .styl faili, peaksite saama järgmise CSS-i:

div {
laius: 563px;
kõrgus: 2810,5 pikslit;
}

Funktsioonid Stylus CSS-is

Saate luua Stylus CSS-is väärtusi tagastavaid funktsioone. Oletame, et soovite määrata teksti joondamine Div omadus "keskele", kui laius on suurem kui 400 pikslit või "vasakule", kui laius on väiksem kui 400 pikslit. Saate luua funktsiooni, mis seda loogikat käsitleb.

alignCenter(n)
kui (n > 400)
 'Keskus'
muidukui (n < 200)
 'vasakule'
div {
laius: 563px
teksti joondamine: alignCenter(@laius)
kõrgus: (@laius / 2)
}

See koodiplokk kutsub alignCenter funktsiooni, läbides laius vara väärtus, viidates sellele @ sümbol. The alignCenter funktsioon kontrollib, kas selle parameeter, n, on suurem kui 400 ja tagastab "keskkoha", kui see on. Kui n on väiksem kui 200, tagastab funktsioon "vasakule".

Kui kompilaator töötab, peaks see tootma järgmise väljundi:

div {
laius: 563px;
teksti joondamine: 'Keskus';
kõrgus: 2810,5 pikslit;
}

Enamikus programmeerimiskeeltes määravad funktsioonid parameetrid nende esitamise järjekorra alusel. See võib põhjustada vigu parameetrite vales järjekorras edastamise tõttu, mis on tõenäolisem, mida rohkem parameetreid peate läbima.

Stylus pakub lahendust: nimega parameetrid. Funktsiooni kutsumisel kasutage neid järjestatud parameetrite asemel, näiteks järgmiselt:

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

Millal kasutada CSS-i eelprotsessorit

CSS-i eelprotsessorid on väga võimsad utiliidid, mida saate oma töövoo sujuvamaks muutmiseks kasutada. Projekti jaoks õige tööriista valimine võib aidata teie tootlikkust parandada. Kui teie projekt vajab vaid väikest kogust CSS-i, võib CSS-i eelprotsessori kasutamine olla üle jõu käiv.

Kui ehitate suurt projekti, võib-olla osana meeskonnast, mis tugineb suurele hulgale CSS-ile, kaaluge eelprotsessori kasutamist. Need pakuvad funktsioone, nagu funktsioonid, tsüklid ja segud, mis hõlbustavad keerukate projektide stiilimist.