V oblasti webového vývoje je CSS nejrozšířenějším způsobem, jak stylovat webové aplikace. Nicméně, práce s CSS může být náročná, protože se jedná o jazyk, který je obecně považován za obtížně laditelný.
Osvojte si práci se Stylus CSS a získáte další možnost v podobě jednoho z nejpopulárnějších preprocesorů CSS, které jsou k dispozici.
Co je to CSS preprocesor?
CSS preprocesory představují nástroje, které zjednodušují psaní CSS. Často kompilují kód ze své vlastní syntaxe do formátu .css, kterému webové prohlížeče rozumí.
Preprocesory CSS, jako je například Sass, nabízí pokročilé funkce, jako jsou smyčky, mixiny, vnořené selektory a příkazy if/else. Tyto funkce významně usnadňují údržbu CSS kódu, zejména v rozsáhlých týmech.
Pro využití CSS preprocesoru je nezbytné nainstalovat kompilátor do lokálního prostředí nebo na produkční server. Některé nástroje pro tvorbu frontendu, například Vite, umožňují začlenění preprocesorů CSS, jako je LessCSS, přímo do projektu.
Jak funguje Stylus CSS?
Pro instalaci Stylus do vašeho lokálního prostředí je nutné mít na vašem počítači nainstalované Node.js a buď Node Package Manager (NPM) nebo Yarn. Spusťte v terminálu následující příkaz:
npm install stylus
Nebo:
yarn add stylus
Každý soubor Stylus CSS má příponu .styl. Po napsání kódu v Stylus CSS, je možné ho zkompilovat pomocí tohoto příkazu:
stylus .
Tento příkaz by měl zkompilovat všechny soubory .styl a vygenerovat odpovídající .css soubory v aktuálním adresáři. Kompilátor Stylus také umožňuje kompilovat soubory .css do .styl pomocí příznaku –css. Pro transformaci .css souboru do formátu .styl použijte tento příkaz:
stylus --css style.css style.styl
Syntaxe a rodičovské selektory v Stylus CSS
V tradičním CSS definujete blok stylu pomocí složených závorek; jejich vynechání způsobí nefunkční styly. V Stylus CSS je použití složených závorek volitelné.
Stylus podporuje syntaxi, která je podobná Pythonu, což znamená, že můžete 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 pomocí znaku ‚&‘:
button
color: white;
&:hover
color: yellow;
Což se zkompiluje do:
button {
color: #fff;
}button:hover {
color: #ff0;
}
Jak používat proměnné v Stylus CSS?
V preprocesorech CSS, jako je Less CSS, definujete proměnné pomocí znaku @, zatímco tradiční CSS používá pro definici proměnné znak „–“.
V Stylus je to trochu jiné: pro definici 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 tuto proměnnou použít v souboru .styl tímto způsobem:
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 prázdnou proměnnou pomocí závorek. Například:
empty-variable = ()
Další hodnoty vlastností můžete odkazovat pomocí symbolu @. Pokud chcete například nastavit výšku elementu div na polovinu jeho šířky, můžete postupovat následovně:
element-width = 563pxdiv
width: element-width
height : (element-width / 2)
Tento kód by fungoval, ale můžete se také vyhnout vytváření proměnné úplně a namí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 hodnotu vlastnosti width elementu 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 Stylus CSS
V Stylus CSS můžete vytvářet funkce, které vracejí hodnoty. Představme si, že chcete nastavit vlastnost zarovnání textu elementu div na hodnotu „center“, pokud je šířka větší než 400 pixelů, nebo na „left“, pokud je šířka menší než 400 pixelů. Můžete vytvořit funkci, která tuto logiku zpracuje.
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 pomocí symbolu @. Funkce alignCenter ověří, zda je její parametr n větší než 400, a pokud ano, vrátí hodnotu „center“. Pokud je n menší než 200, funkce vrátí „left“.
Po spuštění kompilátoru by se měl vytvořit následující výstup:
div {
width: 563px;
text-align: 'center';
height: 281.5px;
}
Ve většině programovacích jazyků jsou parametry funkcím přiřazovány na základě pořadí, ve kterém jsou předávány. To může vést k chybám v důsledku předání parametrů ve špatném pořadí, což je pravděpodobnější, čím více parametrů je třeba předat.
Stylus nabízí řešení: pojmenované parametry. Použijte je místo uspořádaných parametrů při volání funkce, jako je to v následujícím příkladu:
subtract(b:30px, a:10px)
Kdy použít CSS preprocesor?
CSS preprocesory jsou velmi užitečné nástroje, které mohou zefektivnit váš pracovní postup. Výběr správného nástroje pro váš projekt může významně přispět ke zvýšení vaší produktivity. Pokud váš projekt vyžaduje jen malé množství CSS, použití preprocesoru CSS může být zbytečné.
Pokud však vytváříte velký projekt, možná v rámci týmu, který se spoléhá na rozsáhlé množství CSS, zvažte použití preprocesoru. Nabízí funkce, jako jsou funkce, smyčky a mixiny, které usnadňují stylování složitých projektů.