Moderní tvorba webových aplikací

O webu

CSS mixiny pomocí @apply

Pomocí pravidla @apply jde v CSS vytvářet vlastní mixiny.

2 minuty

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.

Při používání PostCSS je ale možné použít plugin, kterou syntaxi s @apply převede do kompatibilní podoby:

Odkazy jinam

Související články

Převod písmen na VELKÁ a malá

Převedení textu na velká nebo malá písmena.

12 minut

Možnosti stylování <iframe>

Co lze a nelze u <iframe> ovlivnit pomocí CSS a jak na změnu textu nebo barev.

10 minut

Zvýraznění aktivní sekce při rolování

Moderní způsoby zvýraznění aktivní položky navigace podle aktuální sekce – CSS i IntersectionObserver.

5 minut

CSS funkce random()

Jak v CSS generovat náhodné hodnoty pomocí random() a kdy ji použít.

6 minut

Web jecas.cz píše Bohumil Jahoda, kontakt
Seznam všech článků
2013–2025