CSS/Mixins

Aus SELFHTML-Wiki
< CSS(Weitergeleitet von @apply)
Wechseln zu: Navigation, Suche

Mit der @apply-Regel können in CSS mit custom properties native Mixins deklariert werden. Langfristig können so Aufgaben von Präprozessoren wie SASS direkt im CSS deklariert werden.

  • Chrome
  • Leer
  • Leer
  • Leer
  • Leer

Details: caniuse.com

Beispiel
:root {
  --heading-style: {
    text-transform: uppercase;
    color: var(--rot);
    border-bottom: 2px solid var(--rot);
  };
}

h1 {
  @apply --heading-style;
}
Im root-Selektor werden in der Notation von CSS-Variablen verschiedene Stile festgelegt.
Diese können mit der @apply-Regel innerhalb eines CSS-Regelsatzes wieder aufgerufen werden.


Browsersupport[Bearbeiten]

Achtung!

Die @apply-Regel ist in keinem Browser außer Chrome Canary implementiert.

Sie können die Darstellung in Ihrem Browser durch das Setzen von “Experimental Web Platform features” ermöglichen.

Weblinks[Bearbeiten]