CSS/@-Regeln/@apply

Achtung!

Die @apply-Regel war zeitweilig ein Vorschlag zur Implementierung von CSS Mixins, wird aber von ihrem Autor mittlerweile als schlechte Idee bezeichnet. 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

• tabatkins.github: CSS @apply Rule A Collection of Interesting Ideas, 18 September 2016
• Tab Atkins auf xanthir.com: Why I abandoned @apply
• chromestatus: CSS @apply Rule
• blog.hospodarets.com: CSS @apply rule (native CSS mixins)
• pawelgrzybek: CSS mixins with @apply rule