CSS mixiny pomocí @apply
Pomocí pravidla @apply jde v CSS vytvářet vlastní mixiny.
Tzv. CSS preprocesory nabízí jako jednu z výhod oproti čistému CSS mixiny. Jedná se o znovupoužitelné kusy CSS pravidel, které jde přiřazovat požadovaným selektorům.
Změny jde potom provádět na jednom místě a kód se nemusí opakovat.
Zápis
Nejprve je potřeba mixin deklarovat:
:root {
--velky-cerveny: {
color: red;
font-size: 200%;
}
}Následně se zmíněná pravidla aplikují na kýžený selektor takto:
h1 {
@apply --velky-cerveny
}Podpora
Pravidlo @apply nemá v roce 2016 rozumnou podporu v prohlížečích.
- Chrome Platform Status: CSS @apply Rule (Behind a flag in desktop Chrome 51)
Při používání PostCSS je ale možné použít plugin, kterou syntaxi s @apply převede do kompatibilní podoby:
Odkazy jinam
Co si myslíte o tomto článku?
Diskuse
Související články
CSS item-pack: balance – vyvážené rozložení flex položek
Vlastnost item-pack: balance rozděluje flex položky rovnoměrně mezi řádky, podobně jako text-wrap: balance vyvažuje řádky textu.
CSS Container Queries – responsivní komponenty
Jak pomocí @container, container-type a container-name vytvářet komponenty, které se přizpůsobí velikosti svého rodiče místo viewportu.
CSS Anchor Positioning – posicování elementů relativně k jiným
Jak pomocí anchor-name, position-anchor a funkce anchor() posicovat elementy relativně k jiným bez JavaScriptu.
Centrování na webových stránkách
Moderní způsoby vertikálního i horizontálního centrování v CSS. Flexbox, Grid, margin auto a další techniky.