Mi az a Stylus CSS és hogyan kell használni?

Ha webfejlesztésről van szó, az alkalmazások stílusának legáltalánosabb módja a CSS használata. A CSS-sel azonban nehézkes lehet dolgozni, mert köztudottan nehéz a hibakeresés.

Tanulja meg a Stylus CSS használatát, és egy másik lehetőség is lesz, az egyik legnépszerűbb elérhető CSS-előfeldolgozóval.

Mi az a CSS előfeldolgozó?

A CSS-előfeldolgozók olyan segédprogramok, amelyek megkönnyítik a CSS-írást. Gyakran fordítanak kódot saját egyéni szintaxisukból a .css formátum, amelyet a böngészők megértenek.

A CSS-előfeldolgozók, mint például a Sass, olyan speciális funkciókat kínálnak, mint a ciklusok, mixinek, beágyazott szelektorok és if/else utasítások. Ezek a funkciók megkönnyítik a CSS-kód karbantartását, különösen nagy csapatokban.

CSS-processzor használatához telepítenie kell a fordítót a helyi környezetre és/vagy az éles kiszolgálóra. Egyes frontend build eszközök, például a Vite, lehetővé teszik a beépítést CSS-előfeldolgozók, mint például a LessCSS a projektedben.

Hogyan működik a Stylus CSS

A Stylus helyi környezetben történő telepítéséhez a Node.js fájlra és bármelyikre van szüksége Node Package Manager (NPM) vagy a gépére telepített fonal. Futtassa a következő terminálparancsot:

npm toll telepítése

Vagy:

fonal adjunk hozzá ceruzát

Minden Stylus CSS-fájl a-ra végződik .styl kiterjesztés. Miután megírta a Stylus CSS kódját, ezzel a paranccsal fordíthatja le:

ceruza .

Ezzel kell összeállítani az összes .styl fájlokat és kimenetet .css fájlokat az aktuális könyvtárban. A Stylus fordító is lehetővé teszi a fordítást .css fájlokat be .styl a... val --css zászló. Konvertálni a .css fájlt a .styl formátumban használja ezt a parancsot:

stylus --css style.css style.styl

Szintaxis és szülőválasztók a Stylus CSS-ben

A hagyományos CSS-ben egy stílusblokkot kapcsos zárójelekkel határoz meg; ezeknek a karaktereknek a felvételének elmulasztása stílusok töréséhez vezet. A Stylus CSS-ben a kapcsos zárójel használata nem kötelező.

A Stylus támogatja a Python-szerű szintaxist, ami azt jelenti, hogy blokkokat definiálhat ehelyett behúzások használatával, például:

.tartály
árrés: 10px

A fenti kódblokk a következő CSS-re fordítódik:

.tartály {
árrés: 10px;
}

Csakúgy, mint az olyan CSS-előfeldolgozóknál, mint a Less, a szülőválasztóra hivatkozhat a & karakter:

gomb
szín: fehér;
 &:lebeg
szín: sárga;

Ami a következőkre fordít:

gomb {
szín: #fff;
}
gomb:lebeg {
szín: #ff0;
}

Változók használata a Stylus CSS-ben

A CSS-előfeldolgozókban, például a Less CSS-ben, a változókat a következővel határozhatja meg @ karakter, míg a hagyományos CSS "--"-t használ egy változó meghatározásához.

A Stylusban a dolgok egy kicsit másképp működnek: nincs szükség speciális szimbólumra a változó meghatározásához. Ehelyett definiálja a változót egyenlőségjellel (=) értékhez kötéséhez:

bg-color = fekete

Most már használhatja a változót a .styl ilyen fájl:

div
háttérszín: bg-color

A fenti kódblokkok a következő CSS-re fordítódnak:

div {
háttérszín: #000;
}

Zárójelekkel megadhat null változót. Például:

üres-változó = ()

Más tulajdonságértékekre hivatkozhat a @ szimbólum. Például, ha egy div magasságát a szélességének felére szeretné beállítani, tegye a következőket:

elem-szélesség = 563px
div
szélesség: elem-szélesség
magasság: (elem-szélesség / 2)

Ez működne, de elkerülheti a változó létrehozását, és hivatkozhat a szélesség ingatlan értéke helyett:

div
szélesség: 563px
magasság: (@szélesség / 2)

Ebben a kódblokkban a @ szimbólum lehetővé teszi a tényleges hivatkozást szélesség ingatlan a div. Függetlenül attól, hogy milyen megközelítést választ, amikor összeállítja a .styl fájlt, a következő CSS-t kell kapnia:

div {
szélesség: 563px;
magasság: 2810,5 képpont;
}

Funkciók a Stylus CSS-ben

Létrehozhat olyan függvényeket, amelyek értékeket adnak vissza a Stylus CSS-ben. Tegyük fel, hogy be szeretné állítani a szöveg igazítás div tulajdonsága a "központba", ha a szélesség nagyobb, mint 400 képpont, vagy „balra”, ha a szélesség kisebb, mint 400 képpont. Létrehozhat egy függvényt, amely kezeli ezt a logikát.

alignCenter(n)
ha (n > 400)
 'központ'
másha (n < 200)
 'bal'
div {
szélesség: 563px
szöveg igazítás: alignCenter(@szélesség)
magasság: (@szélesség / 2)
}

Ez a kódblokk meghívja a alignCenter funkciót, átadva a szélesség ingatlan értékét azzal, hogy a @ szimbólum. A alignCenter függvény ellenőrzi, hogy a paramétere, n, nagyobb, mint 400, és ha igen, akkor a "közép" értéket adja vissza. Ha n kisebb, mint 200, a függvény "balra" ad vissza.

Amikor a fordító fut, a következő kimenetet kell produkálnia:

div {
szélesség: 563px;
szöveg igazítás: 'központ';
magasság: 2810,5 képpont;
}

A legtöbb programozási nyelvben a függvények paramétereket rendelnek hozzá a megadott sorrend alapján. Ez hibákhoz vezethet, ha a paramétereket rossz sorrendben adjuk át, ami valószínűbb, minél több paramétert kell átadni.

A Stylus megoldást kínál: elnevezett paraméterek. Ezeket használja a rendezett paraméterek helyett, amikor függvényt hív meg, például:

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

Mikor használjunk CSS-előfeldolgozót

A CSS-előfeldolgozók nagyon hatékony segédprogramok, amelyek segítségével egyszerűsítheti munkafolyamatait. A projekthez megfelelő eszköz kiválasztása segíthet a termelékenység javításában. Ha a projektnek csak kis mennyiségű CSS-re van szüksége, akkor a CSS-előfeldolgozó használata túlzás lehet.

Ha egy nagy projektet épít fel, esetleg egy csapat tagjaként, amely hatalmas mennyiségű CSS-re támaszkodik, fontolja meg egy előfeldolgozó használatát. Olyan funkciókat kínálnak, mint a funkciók, hurkok és mixek, amelyek megkönnyítik az összetett projektek stílusát.