Kas yra Stylus CSS ir kaip juo naudotis?

Kalbant apie žiniatinklio kūrimą, labiausiai paplitęs būdas sukurti programos stilių yra naudoti CSS. Tačiau dirbti su CSS gali būti sudėtinga, nes ją labai sunku derinti.

Sužinokite, kaip naudoti Stylus CSS, ir turėsite kitą parinktį su vienu iš populiariausių CSS išankstinių procesorių.

Kas yra CSS pirminis procesorius?

CSS išankstiniai procesoriai yra paslaugos, kurios palengvina CSS rašymą. Jie dažnai kompiliuoja kodą iš savo tinkintos sintaksės į .css formatą, kurį gali suprasti naršyklės.

Pavyzdžiui, CSS pirminiai procesoriai, tokie kaip Sass, siūlo specialias funkcijas, tokias kaip kilpos, miksai, įdėtieji parinkikliai ir if/else teiginiai. Šios funkcijos palengvina CSS kodo priežiūrą, ypač didelėse komandose.

Norėdami naudoti CSS procesorių, turite įdiegti kompiliatorių savo vietinėje aplinkoje ir (arba) gamybos serveryje. Kai kurie sąsajos kūrimo įrankiai, pvz., „Vite“, leidžia įtraukti CSS pirminiai procesoriai, tokie kaip LessCSS savo projekte.

Kaip veikia Stylus CSS

Norėdami įdiegti Stylus vietinėje aplinkoje, jums reikia Node.js ir bet kurio kito Mazgo paketų tvarkyklė (NPM) arba jūsų mašinoje įdiegtas verpalas. Vykdykite šią terminalo komandą:

npm įdiegti rašiklį

Arba:

verpalai pridėkite rašiklį

Kiekvienas Stylus CSS failas baigiasi a .stilius pratęsimas. Kai parašysite savo Stylus CSS kodą, galite jį kompiliuoti naudodami šią komandą:

rašiklis .

Tai turėtų sudaryti visus .stilius failus ir išvestį .css failus dabartiniame kataloge. Stylus kompiliatorius taip pat leidžia kompiliuoti .css failus į .stilius su --css vėliava. Norėdami konvertuoti a .css failą į .stilius formatu, naudokite šią komandą:

rašiklis --css style.css style.styl

Sintaksė ir tėvų parinkikliai programoje Stylus CSS

Tradicinėje CSS apibrėžiate stiliaus bloką su skliaustais; Jei neįtrauksite šių simbolių, stiliai bus pažeisti. Stylus CSS breketų naudojimas yra neprivalomas.

Stylus palaiko į Python panašią sintaksę, o tai reiškia, kad galite apibrėžti blokus naudodami įtraukas, pavyzdžiui:

.konteineris
marža: 10px

Aukščiau pateiktas kodo blokas sukompiliuojamas į šį CSS:

.konteineris {
marža: 10px;
}

Kaip ir CSS išankstiniuose procesoriuose, tokiuose kaip Less, pirminį parinkiklį galite nurodyti naudodami & charakteris:

mygtuką
spalva: baltas;
 &:užveskite pelės žymeklį
spalva: geltona;

Kuris kompiliuoja į:

mygtuką {
spalva: #fff;
}
mygtuką:užveskite pelės žymeklį {
spalva: #ff0;
}

Kaip naudoti kintamuosius „Stylus CSS“.

CSS išankstiniuose procesoriuose, tokiuose kaip Less CSS, kintamuosius apibrėžiate naudodami @ charakteris, o tradicinis CSS naudoja "--" kintamajam apibrėžti.

„Stylus“ viskas yra šiek tiek kitaip: jums nereikia specialaus simbolio, kad apibrėžtumėte kintamąjį. Vietoj to tiesiog apibrėžkite kintamąjį naudodami lygybės ženklą (=), kad susietumėte jį su verte:

bg spalvos = juodas

Dabar galite naudoti kintamąjį .stilius failas toks:

div
fono spalva: bg spalvos

Aukščiau pateikti kodo blokai sukompiliuojami į šį CSS:

div {
fono spalva: #000;
}

Nulinį kintamąjį galite apibrėžti skliausteliuose. Pavyzdžiui:

tuščias-kintamasis = ()

Galite nurodyti kitas nuosavybės vertes naudodami @ simbolis. Pavyzdžiui, jei norite nustatyti, kad div aukštis būtų pusė jo pločio, galite atlikti šiuos veiksmus:

elemento plotis = 563px
div
plotis: elemento plotis
aukščio: (elemento plotis / 2)

Tai veiktų, bet taip pat galite visiškai nekurti kintamojo ir nurodyti jį plotis Vietoj to turto vertė:

div
plotis: 563px
aukščio: (@plotis / 2)

Šiame kodo bloke @ simbolis leidžia nurodyti tikrąjį plotis turtas ant div. Nepriklausomai nuo pasirinkto metodo, kai sudarote .stilius failą, turėtumėte gauti šį CSS:

div {
plotis: 563px;
aukščio: 281.5 piks;
}

Funkcijos Stylus CSS

Stylus CSS galite kurti funkcijas, kurios grąžina reikšmes. Tarkime, kad norite nustatyti teksto lygiavimas div savybė į „centrą“, jei plotis yra didesnis nei 400 pikselių arba „kairėje“, jei plotis yra mažesnis nei 400 pikselių. Galite sukurti funkciją, kuri tvarko šią logiką.

alignCenter(n)
jeigu (n > 400)
 'centras'
Kitasjeigu (n < 200)
 'paliko'
div {
plotis: 563px
teksto lygiavimas: alignCenter(@plotis)
aukščio: (@plotis / 2)
}

Šis kodo blokas iškviečia alignCenter funkciją, praeinant plotis turto vertę, nurodydami ją su @ simbolis. The alignCenter funkcija patikrina, ar jos parametras, n, yra didesnis nei 400 ir grąžina „centrą“, jei yra. Jeigu n yra mažesnis nei 200, funkcija grąžina "į kairę".

Kai kompiliatorius paleidžiamas, jis turėtų pateikti tokią išvestį:

div {
plotis: 563px;
teksto lygiavimas: 'centras';
aukščio: 281.5 piks;
}

Daugumoje programavimo kalbų funkcijos priskiria parametrus pagal jų pateikimo tvarką. Dėl to gali atsirasti klaidų, kai parametrai perduodami neteisinga tvarka, o tai labiau tikėtina, kuo daugiau parametrų turėsite perduoti.

Stylus pateikia sprendimą: pavadintus parametrus. Naudokite juos vietoj sutvarkytų parametrų, kai iškviečiate funkciją, pavyzdžiui:

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

Kada naudoti CSS išankstinį apdorojimą

CSS išankstiniai procesoriai yra labai galingos priemonės, kurias galite naudoti norėdami supaprastinti savo darbo eigą. Pasirinkę tinkamą įrankį projektui, galite pagerinti produktyvumą. Jei jūsų projektui reikia tik nedidelio CSS kiekio, naudoti CSS išankstinį procesorių gali būti per daug.

Jei kuriate didelį projektą, galbūt kaip komandos dalis, kuri remiasi didžiuliu CSS kiekiu, apsvarstykite galimybę naudoti išankstinį apdorojimą. Jie siūlo tokias funkcijas kaip funkcijos, kilpos ir mišiniai, kurie palengvina sudėtingų projektų stilių.