Možná jste více obeznámeni s jinými preprocesory CSS, ale nepřehlédněte tohoto uchazeče.

Pokud jde o vývoj webu, nejběžnějším způsobem stylizace aplikace je použití CSS. Práce s CSS však může být těžkopádná, protože je notoricky obtížné ladit.

Naučte se používat Stylus CSS a budete mít další možnost s jedním z nejpopulárnějších dostupných preprocesorů CSS.

Co je preprocesor CSS?

CSS preprocesory jsou nástroje, které usnadňují psaní CSS. Často kompilují kód ze své vlastní syntaxe do .css formátu, kterému prohlížeče rozumí.

Preprocesory CSS jako Sass například nabízejí speciální funkce, jako jsou smyčky, mixiny, vnořené selektory a příkazy if/else. Tyto funkce usnadňují údržbu kódu CSS, zejména ve velkých týmech.

Chcete-li použít procesor CSS, musíte kompilátor nainstalovat do místního prostředí a/nebo produkčního serveru. Některé nástroje pro vytváření frontendu, jako je Vite, vám umožňují zahrnout CSS preprocesory jako LessCSS ve vašem projektu.

Jak Stylus CSS funguje

Chcete-li nainstalovat Stylus ve vašem místním prostředí, potřebujete Node.js a buď

instagram viewer
Správce balíčků uzlů (NPM) nebo Příze nainstalovaná na vašem stroji. Spusťte následující příkaz terminálu:

npm nainstalovat stylus

Nebo:

příze přidat stylus

Každý soubor CSS stylusu končí na a .styl rozšíření. Jakmile napíšete kód Stylus CSS, můžete jej zkompilovat pomocí tohoto příkazu:

stylus .

To by mělo zkompilovat všechny .styl soubory a výstup .css soubory v aktuálním adresáři. Kompilátor Stylus také umožňuje kompilaci .css soubory do .styl s --css vlajka. Chcete-li převést a .css soubor do .styl formát, použijte tento příkaz:

stylus --css styl.css styl.styl

Syntaxe a nadřazené selektory v Stylus CSS

V tradičním CSS definujete blok stylu se složenými závorkami; nezahrnutí těchto znaků povede k nefunkčním stylům. V Stylus CSS je použití složených závorek volitelné.

Stylus podporuje syntaxi podobnou Pythonu, což znamená, že můžete místo toho definovat bloky pomocí odsazení, například takto:

.kontejner
okraj: 10px

Výše uvedený blok kódu se zkompiluje do následujícího CSS:

.kontejner {
okraj: 10px;
}

Stejně jako v preprocesorech CSS, jako je Less, můžete odkazovat na rodičovský selektor pomocí & charakter:

knoflík
barva: bílý;
 &:vznášet se
barva: žlutá;

Které se zkompiluje do:

knoflík {
barva: #fff;
}
knoflík:vznášet se {
barva: #ff0;
}

Jak používat proměnné ve stylus CSS

V preprocesorech CSS, jako je Less CSS, definujete proměnné pomocí @ charakter, zatímco tradiční CSS používá k definování proměnné "--"..

Ve stylusu jsou věci trochu jiné: k definování proměnné nepotřebujete speciální symbol. Místo toho definujte proměnnou pomocí znaménka rovná se (=), abyste jej svázali s hodnotou:

bg-color = Černá

Nyní můžete použít proměnnou v .styl soubor takto:

div
barva pozadí: bg-color

Výše uvedené bloky kódu se zkompilují do následujícího CSS:

div {
barva pozadí: #000;
}

Můžete definovat nulovou proměnnou se závorkami. Například:

prázdná-proměnná = ()

Další hodnoty vlastností můžete odkazovat pomocí @ symbol. Pokud například chcete nastavit výšku prvku div na polovinu jeho šířky, můžete provést následující:

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

To by fungovalo, ale můžete se také vyhnout vytvoření proměnné úplně a odkazovat na ni šířka místo toho hodnota vlastnosti:

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

V tomto bloku kódu je @ symbol umožňuje odkazovat na skutečné šířka nemovitost na div. Bez ohledu na přístup, který zvolíte, když kompilujete soubor .styl soubor, měli byste získat následující CSS:

div {
šířka: 563px;
výška: 2810,5 pixelů;
}

Funkce v Stylus CSS

V Stylus CSS můžete vytvářet funkce, které vracejí hodnoty. Řekněme, že chcete nastavit zarovnání textu vlastnost div to "centrovat", pokud šířka je větší než 400 pixelů, nebo "vlevo", pokud šířka je menší než 400 pixelů. Můžete vytvořit funkci, která tuto logiku zpracovává.

alignCenter(n)
-li (n > 400)
 'centrum'
jiný-li (n < 200)
 'vlevo, odjet'
div {
šířka: 563px
zarovnání textu: alignCenter(@šířka)
výška: (@šířka / 2)
}

Tento blok kódu volá alignCenter funkce, předávání šířka hodnotu nemovitosti odkazem na @ symbol. The alignCenter funkce kontroluje, zda její parametr, n, je větší než 400, a pokud je, vrátí "střed". Li n je menší než 200, funkce vrátí "left".

Když se kompilátor spustí, měl by vytvořit následující výstup:

div {
šířka: 563px;
zarovnání textu: 'centrum';
výška: 2810,5 pixelů;
}

Ve většině programovacích jazyků funkce přiřazují parametry na základě pořadí, ve kterém je poskytujete. To může vést k chybám v důsledku předávání parametrů ve špatném pořadí, což je pravděpodobnější, čím více parametrů musíte předat.

Stylus poskytuje řešení: pojmenované parametry. Použijte je místo uspořádaných parametrů při volání funkce, jako je tento:

odčítat(b: 30 pixelů, A:10px)/*-20px*/

Kdy použít preprocesor CSS

Preprocesory CSS jsou velmi výkonné nástroje, které můžete použít ke zefektivnění pracovního postupu. Výběr správného nástroje pro váš projekt může pomoci zvýšit vaši produktivitu. Pokud váš projekt potřebuje jen malé množství CSS, může být použití preprocesoru CSS přehnané.

Pokud budujete velký projekt, možná jako součást týmu, který spoléhá na obrovské množství CSS, zvažte použití preprocesoru. Nabízejí funkce, jako jsou funkce, smyčky a mixiny, které usnadňují stylizaci složitých projektů.