CSS/@-Regeln/@apply

Aus SELFHTML-Wiki
< CSS‎ | @-Regeln
Wechseln zu: Navigation, Suche

Achtung!

Die @apply-Regel war zeitweilig ein Vorschlag zur Implementierung von CSS Mixins, wird aber von ihrem Autor mittlerweile als schlechte Idee bezeichnet[1]. Der entsprechende Standardisierungsvorschlag wurde zurückgezogen.

Mit der @apply-Regel wäre es möglich gewesen, in CSS mit custom properties native Mixins zu deklarieren und auf diese Weise Aufgaben von Präprozessoren wie SASS direkt im CSS zu lösen.

Eine Versuchsimplementierung fand sich in Canary-Versionen von Chrome und wurde 2017 wieder entfernt.

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

nicht mehr vorhanden.

Weblinks


  1. Tab Atkins auf xanthir.com: Why I abandoned @apply