Kaj je Stylus CSS in kako ga uporabljate?

Ko gre za spletni razvoj, je najpogostejši način oblikovanja aplikacije uporaba CSS. Vendar pa je delo s CSS lahko okorno, ker je znano, da ga je težko odpraviti.

Naučite se uporabljati Stylus CSS in imeli boste drugo možnost z enim najbolj priljubljenih razpoložljivih predprocesorjev CSS.

Kaj je predprocesor CSS?

Predprocesorji CSS so pripomočki, ki olajšajo pisanje CSS. Pogosto prevajajo kodo iz lastne sintakse po meri v .css obliki, ki jo brskalniki razumejo.

Predprocesorji CSS, kot je na primer Sass, ponujajo posebne funkcije, kot so zanke, mešanice, ugnezdeni izbirniki in stavke if/else. Te funkcije olajšajo vzdrževanje kode CSS, zlasti v velikih skupinah.

Če želite uporabljati procesor CSS, morate prevajalnik namestiti v lokalno okolje in/ali produkcijski strežnik. Nekatera orodja za gradnjo čelnega vmesnika, kot je Vite, vam omogočajo vključitev Predprocesorji CSS, kot je LessCSS v vašem projektu.

Kako deluje Stylus CSS

Če želite namestiti Stylus v svoje lokalno okolje, potrebujete Node.js in bodisi Node Package Manager (NPM) ali Yarn nameščen na vašem stroju. Zaženite naslednji terminalski ukaz:

npm namestite pisalo

ali:

preja dodajte pisalo

Vsaka datoteka CSS Stylus se konča z a .stil razširitev. Ko napišete svojo kodo CSS Stylus, jo lahko prevedete s tem ukazom:

pisalo.

To bi moralo zbrati vse .stil datoteke in izhod .css datotek v trenutnem imeniku. Prevajalnik Stylus omogoča tudi prevajanje .css datoteke v .stil z --css zastava. Za pretvorbo a .css datoteko v .stil format, uporabite ta ukaz:

pisalo --css slog.css slog.stil

Sintaksa in nadrejeni izbirniki v Stylus CSS

V tradicionalnem CSS-ju definirate slogovni blok z oklepaji; če teh znakov ne vključite, bo prišlo do pokvarjenih slogov. V Stylus CSS uporaba oklepajev ni obvezna.

Stylus podpira sintakso, podobno Pythonu, kar pomeni, da lahko namesto tega definirate bloke z zamiki, kot je ta:

.posoda
marža: 10px

Zgornji blok kode se prevede v naslednji CSS:

.posoda {
marža: 10px;
}

Tako kot v predprocesorjih CSS, kot je Less, se lahko na nadrejeni izbirnik sklicujete z & znak:

gumb
barva: bela;
 &:lebdi
barva: rumena;

Ki se sestavi v:

gumb {
barva: #fff;
}
gumb:lebdi {
barva: #ff0;
}

Kako uporabljati spremenljivke v Stylus CSS

V predprocesorjih CSS, kot je Less CSS, definirate spremenljivke z @ značaj, medtem ko tradicionalni CSS uporablja "--" za definiranje spremenljivke.

V Stylusu so stvari nekoliko drugačne: za definiranje spremenljivke ne potrebujete posebnega simbola. Namesto tega samo definirajte spremenljivko z znakom enačaja (=), da ga povežete z vrednostjo:

bg-barva = Črna

Zdaj lahko uporabite spremenljivko v .stil datoteka, kot je ta:

div
Barva ozadja: bg-barva

Zgornji bloki kode se prevedejo v naslednji CSS:

div {
Barva ozadja: #000;
}

Ničelno spremenljivko lahko definirate z oklepaji. Na primer:

prazna spremenljivka = ()

Lahko se sklicujete na druge vrednosti lastnosti z uporabo @ simbol. Na primer, če želite nastaviti višino diva na polovico njegove širine, lahko storite naslednje:

širina elementa = 563px
div
premer: širina elementa
višina: (širina elementa / 2)

To bi delovalo, vendar se lahko tudi popolnoma izognete ustvarjanju spremenljivke in se sklicujete na premer namesto tega vrednost lastnosti:

div
premer: 563px
višina: (@premer / 2)

V tem kodnem bloku je @ vam omogoča, da se sklicujete na dejansko premer lastnina na div. Ne glede na pristop, ki ga izberete, ko sestavite .stil datoteko, bi morali dobiti naslednji CSS:

div {
premer: 563px;
višina: 281.5px;
}

Funkcije v Stylus CSS

Ustvarite lahko funkcije, ki vračajo vrednosti v Stylus CSS. Recimo, da želite nastaviti poravnava besedila lastnost diva za "centriranje", če je premer je večji od 400 slikovnih pik ali "levo", če je premer je manj kot 400 slikovnih pik. Ustvarite lahko funkcijo, ki obravnava to logiko.

alignCenter(n)
če (n > 400)
 'center'
drugačeče (n < 200)
 'levo'
div {
premer: 563px
poravnava besedila: alignCenter(@premer)
višina: (@premer / 2)
}

Ta blok kode pokliče alignCenter funkcijo, mimo premer vrednost nepremičnine tako, da jo navedete z @ simbol. The alignCenter funkcija preveri, ali njen parameter, n, je večji od 400 in vrne "center", če je. če n manj kot 200, funkcija vrne "levo".

Ko se prevajalnik zažene, mora ustvariti naslednje rezultate:

div {
premer: 563px;
poravnava besedila: 'center';
višina: 281.5px;
}

V večini programskih jezikov funkcije dodelijo parametre glede na vrstni red, v katerem jih podate. To lahko povzroči napake zaradi podajanja parametrov v napačnem vrstnem redu, kar je bolj verjetno, več parametrov morate posredovati.

Stylus ponuja rešitev: imenovani parametri. Uporabite jih namesto urejenih parametrov, ko pokličete funkcijo, kot je ta:

odšteti(b:30 slikovnih pik, a:10px)/*-20px*/

Kdaj uporabiti predprocesor CSS

Predprocesorji CSS so zelo zmogljivi pripomočki, s katerimi lahko poenostavite potek dela. Izbira pravega orodja za vaš projekt lahko pomaga izboljšati vašo produktivnost. Če vaš projekt potrebuje le majhno količino CSS, je uporaba predprocesorja CSS morda pretirana.

Če gradite velik projekt, morda kot del ekipe, ki se opira na ogromno CSS, razmislite o uporabi predprocesorja. Ponujajo funkcije, kot so funkcije, zanke in miksini, ki olajšajo oblikovanje kompleksnih projektov.