CSS mixiny pomocí @apply

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

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Počítání v CSS funkcí calc()

Počítání v CSS pomocí calc()

Od Exploreru 9 a mimo starou Operu 12 lze přímo v CSS provádět jednoduché výpočty využitím calc().

CSS toggle()

CSS funkce toggle()

Nefunguje zatím snad nikde, měla by sloužit k pohodlnému zadávání hodnot pro zanořené elementy stejného názvu.

Proměnné v CSS

Proměnné v CSS – var()

Proměnné přímo v CSS přes funkci var().

Průhledné pozadí rgba()

Zápis průhledné barvy rgba()

Zadávání barev v CSS pomocí rgba() umožňuje vytvořit průhledné jednobarevné pozadí.

CSS gradient

Gradienty v CSS

Jak vytvořit barevný přechod (gradient) přímo v CSS bez použití obrázku.

Komentáře