Was ist @apply in CSS?

Zunächst beziehe ich mich auf das CSS-Tag.

Ich habe gegoogelt, @applyaber ich konnte nichts finden, was seine Bedeutung für mich richtig erklären könnte.

Was ist die Verwendung eines solchen Tags?

die einfache Art, es zu erklären, wäre; Einführen von Variablen in CSS (was ein Merkmal von Präprozessoren wie Sass ist) und Mixin, die wie Verhalten funktionieren (auch in Präprozessoren).

Stellen Sie sich vor, das --header-themeist eine Funktion (Mixin)

:root {
  --header-theme: {
    color: red;
    font-family: cursive;
    font-weight: 600;
  };
}

h1 {
  @apply --header-theme;
}


h2 {
  @apply --header-theme;
}

Auf diese Weise können Sie es an vielen verschiedenen Orten verwenden, ohne es erneut DRY schreiben zu müssen

Jetzt könnte der variable Teil mit diesem Beispiel erklären

:root {
  --brand-color: red;/*   default value*/
  --header-theme: {
    color: var(--brand-color);
    font-family: cursive;
    font-weight: 600;
  };
}

h1 {
  @apply --header-theme;
}


h2 {
  --brand-color: green; 
  @apply --header-theme;
}

Dem Mixin wird eine Variable gesendet, die die Farbe ändert

Dies sind nicht die Grenzen der Funktion. Sie können sie weitaus häufiger verwenden. Sie können mehr über Mixin und Variablen in SASS lesen, um sie auf andere Weise zu verwenden, nachdem ich Ihnen vorgeschlagen habe, diesen Blog-Beitrag zu lesen

Jetzt, nachdem ich Sie aufgeregt habe, Zeit für die schlechten Nachrichten, ist es noch nicht in Browsern implementiert, Chrome , es ist immer noch wert zu wissen, dass es kommt und vielleicht, wenn Sie sich vorbereiten möchten, beginnen Sie mit SASS

@applystammt aus einem Vorschlag , der inzwischen aufgegeben und durch CSS Shadow Parts ersetzt wurde .

Die @ apply-Regel, mit der ein Autor eine Reihe von Eigenschaften in einer benannten Variablen speichern und dann in anderen Stilregeln referenzieren kann.

@applyist ziemlich cool. Grundsätzlich können Sie CSS-Blöcke wiederverwenden, ohne sie kopieren zu müssen und ohne ihre Selektoren ändern zu müssen.

Dies erleichtert die Verwendung von CSS-Frameworks und die gleichzeitige Beibehaltung semantischer Klassennamen.

Ich habe diesen Artikel gefunden eine nette Einführung in diese Funktion ist.

Leider gibt es derzeit im Grunde keine Browserunterstützung . Es kann mit einem CSS-Vorprozessor wie PostCSS verwendet werden .

Die Zukunft ist auch ungewiss, wenn ich gut verstehe. Der Hauptvertreter dieser Funktion hat die Unterstützung eingestellt .