Co je Stylus CSS a jak jej používáte?

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 formátu .css, 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, umožňují zahrnout do projektu preprocesory CSS, jako je LessCSS.

Jak Stylus CSS funguje

Chcete-li nainstalovat Stylus do vašeho místního prostředí, musíte mít na svém počítači nainstalovaný Node.js a buď Node Package Manager (NPM) nebo Yarn. Spusťte následující příkaz terminálu:

 npm install stylus 

Nebo:

 yarn add stylus 

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

 stylus .

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

 stylus --css style.css style.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:

 .container
    margin: 10px

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

 .container {
  margin: 10px;
}

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

 button
    color: white;
    &:hover
        color: yellow;

Která se zkompiluje do:

 button {
  color: #fff;
}
button:hover {
  color: #ff0;
}
 

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

V preprocesorech CSS, jako je Less CSS, definujete proměnné pomocí znaku @, 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 ji svázali s hodnotou:

 bg-color = black

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

 div
    background-color: bg-color

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

 div {
  background-color: #000;
}

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

 empty-variable = ()

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

 element-width = 563px
div
    width: element-width
    height : (element-width / 2)
 

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

 div
    width: 563px
    height: (@width / 2)

V tomto bloku kódu vám symbol @ umožňuje odkazovat na skutečnou vlastnost width na div. Bez ohledu na zvolený přístup byste při kompilaci souboru .styl měli získat následující CSS:

 div {
  width: 563px;
  height: 281.5px;
}

Funkce v CSS stylusu

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

 alignCenter(n)
    if (n > 400)
        'center'
    else if (n < 200)
        'left'
div {
    width: 563px
    text-align: alignCenter(@width)
    height: (@width / 2)
}
 

Tento blok kódu volá funkci alignCenter a předává hodnotu vlastnosti width odkazem na symbol @. Funkce alignCenter zkontroluje, zda je její parametr n větší než 400, a pokud ano, vrátí „centr“. Pokud je n menší než 200, funkce vrátí „left“.

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

 div {
  width: 563px;
  text-align: 'center';
  height: 281.5px;
}

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:

 subtract(b:30px, a:10px)  

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ů.