Čo je Stylus CSS a ako ho používate?

Pokiaľ ide o vývoj webových aplikácií, najbežnejším spôsobom štýlu aplikácie je použitie CSS. Práca s CSS však môže byť ťažkopádna, pretože je notoricky ťažké ladiť.

Naučte sa používať Stylus CSS a budete mať ďalšiu možnosť s jedným z najpopulárnejších dostupných preprocesorov CSS.

Čo je predprocesor CSS?

CSS preprocesory sú nástroje, ktoré uľahčujú písanie CSS. Často kompilujú kód zo svojej vlastnej syntaxe do .css formát, ktorému prehliadače rozumejú.

Preprocesory CSS, ako napríklad Sass, ponúkajú špeciálne funkcie, ako sú slučky, mixiny, vnorené selektory a príkazy if/else. Tieto funkcie uľahčujú údržbu kódu CSS, najmä vo veľkých tímoch.

Ak chcete použiť procesor CSS, musíte kompilátor nainštalovať do svojho lokálneho prostredia a/alebo produkčného servera. Niektoré nástroje na zostavovanie frontendu, ako napríklad Vite, vám umožňujú zahrnúť CSS preprocesory ako LessCSS vo vašom projekte.

Ako funguje Stylus CSS

Ak chcete nainštalovať Stylus vo svojom lokálnom prostredí, potrebujete Node.js a oboje Správca balíkov uzlov (NPM) alebo Priadza nainštalovaná na vašom stroji. Spustite nasledujúci príkaz terminálu:

npm nainštalujte stylus

alebo:

priadza pridať stylus

Každý súbor Stylus CSS končí na a .styl rozšírenie. Po napísaní kódu Stylus CSS ho môžete skompilovať pomocou tohto príkazu:

stylus .

Toto by malo skompilovať všetky .styl súbory a výstup .css súbory v aktuálnom adresári. Kompilátor Stylus tiež umožňuje kompiláciu .css súbory do .styl s --css vlajka. Ak chcete previesť a .css súbor do .styl formát, použite tento príkaz:

stylus --css style.css style.styl

Syntax a výber rodičov v Stylus CSS

V tradičnom CSS definujete blok štýlu so zloženými zátvorkami; nezahrnutie týchto znakov povedie k porušeniu štýlov. V Stylus CSS je používanie zátvoriek voliteľné.

Stylus podporuje syntax podobnú Pythonu, čo znamená, že namiesto toho môžete bloky definovať pomocou odsadení, napríklad takto:

.kontajner
marža: 10px

Vyššie uvedený blok kódu sa skompiluje do nasledujúceho CSS:

.kontajner {
marža: 10px;
}

Rovnako ako v predprocesoroch CSS, ako je Less, môžete odkazovať na rodičovský selektor pomocou & postava:

tlačidlo
farba: biely;
 &:vznášať sa
farba: žltá;

Ktorý sa skompiluje na:

tlačidlo {
farba: #fff;
}
tlačidlo:vznášať sa {
farba: #ff0;
}

Ako používať premenné v Stylus CSS

V preprocesoroch CSS, ako je Less CSS, definujete premenné pomocou @ postava, zatiaľ čo tradičné CSS používa "--" na definovanie premennej.

V Styluse sú veci trochu iné: na definovanie premennej nepotrebujete špeciálny symbol. Namiesto toho definujte premennú pomocou znaku rovnosti (=), aby ste ho naviazali na hodnotu:

bg-color = čierna

Teraz môžete použiť premennú v .styl súbor takto:

div
farba pozadia: bg-color

Vyššie uvedené bloky kódu sa kompilujú do nasledujúceho CSS:

div {
farba pozadia: #000;
}

Môžete definovať nulovú premennú so zátvorkami. Napríklad:

prázdna-premenná = ()

Na iné hodnoty vlastností môžete odkazovať pomocou @ symbol. Ak chcete napríklad nastaviť výšku prvku div na polovicu jeho šírky, môžete urobiť nasledovné:

element-width = 563px
div
šírka: element-width
výška: (element-width / 2)

To by fungovalo, ale môžete sa tiež vyhnúť vytvoreniu premennej úplne a odkazovať na ňu šírka namiesto toho hodnota nehnuteľnosti:

div
šírka: 563px
výška: (@šírka / 2)

V tomto bloku kódu je @ symbol vám umožňuje odkazovať na skutočné šírka nehnuteľnosť na div. Bez ohľadu na prístup, ktorý si zvolíte pri zostavovaní súboru .styl súbor, mali by ste získať nasledujúci CSS:

div {
šírka: 563px;
výška: 2810,5 pixelov;
}

Funkcie v Stylus CSS

V Stylus CSS môžete vytvárať funkcie, ktoré vracajú hodnoty. Povedzme, že chcete nastaviť zarovnanie textu vlastnosť div na "centrovať", ak šírka je väčšia ako 400 pixelov alebo "vľavo", ak je šírka je menšia ako 400 pixelov. Môžete vytvoriť funkciu, ktorá túto logiku zvládne.

alignCenter(n)
ak (n > 400)
 'stred'
inakak (n < 200)
 'vľavo'
div {
šírka: 563px
zarovnanie textu: alignCenter(@šírka)
výška: (@šírka / 2)
}

Tento blok kódu volá alignCenter funkciu, odovzdanie šírka hodnotu nehnuteľnosti jej odkazovaním na @ symbol. The alignCenter funkcia kontroluje, či jej parameter, n, je väčší ako 400, a ak je, vráti "stred". Ak n je menej ako 200, funkcia vráti "vľavo".

Keď sa kompilátor spustí, mal by produkovať nasledujúci výstup:

div {
šírka: 563px;
zarovnanie textu: 'stred';
výška: 2810,5 pixelov;
}

Vo väčšine programovacích jazykov funkcie priraďujú parametre na základe poradia, v ktorom ich zadávate. To môže viesť k chybám v dôsledku odovzdávania parametrov v nesprávnom poradí, čo je pravdepodobnejšie, čím viac parametrov musíte odovzdať.

Dotykové pero poskytuje riešenie: pomenované parametre. Použite ich namiesto usporiadaných parametrov pri volaní funkcie, ako je tento:

odčítať(b: 30 pixelov, a:10px)/*-20px*/

Kedy použiť predprocesor CSS

CSS preprocesory sú veľmi výkonné nástroje, ktoré môžete použiť na zefektívnenie pracovného postupu. Výber správneho nástroja pre váš projekt môže pomôcť zvýšiť vašu produktivitu. Ak váš projekt potrebuje len malé množstvo CSS, potom môže byť použitie predprocesora CSS prehnané.

Ak budujete veľký projekt, možno ako súčasť tímu, ktorý sa spolieha na obrovské množstvo CSS, zvážte použitie preprocesora. Ponúkajú funkcie, ako sú funkcie, slučky a mixiny, ktoré uľahčujú štýlovanie zložitých projektov.