Was ist @apply in CSS?

81

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?

css

— GameCoder
quelle

3

tabatkins.github.io/specs/css-apply-rule Einige nützliche Lektüre möglicherweise

— CollinD

1

Wo bist du darauf gestoßen?

— j08691

2

Ich bin auf diesen Link

— gestoßen

44

Warum haben so viele Leute dies abgelehnt? Es ist eine absolut gültige Frage und berührt eine erweiterte Funktion von CSS, von der viele Menschen offensichtlich nichts wissen. Rückenwind macht großen Gebrauch von der @applyRichtlinie. Seien Sie nicht so schnell, um die Fragen der Leute abzulehnen. Zu viel davon ist hier los. Außerdem stelle ich fest, dass das OP kein Mitglied des Stackoverflow mehr ist. Ist er aus diesem Grund gegangen? Es ist erbärmlich.

— Stephenmurdoch

29

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

— oqx
quelle

Dient die var-Funktion in SASS demselben Zweck wie in Javascript? Entschuldigung, ich kenne keinen SASS.

— GameCoder

Die Variable ist irgendwie das gleiche Steuerelement von einem Ort aus, anstatt sie neu zu schreiben. Die Funktion ist ein bisschen anders, aber sie dient der gleichen allgemeinen Idee, was ich zu sagen versuche. im Moment wirst du es sowieso nicht benutzen können; Wenn Sie also neugierig auf die Funktionsprüfung sass (ruby) oder weniger (node.js) sind, kamen sie auf die Idee

— oqx

2

Der Blog-Beitrag des Spezifikationsautors mit dem Titel "Warum ich @apply verlassen habe" legt nahe, dass diese Funktion NICHT in zukünftige Browser aufgenommen wird. Spezifikation wie ich sie gefunden habe - tabatkins.github.io/specs/css-apply-rule/#intro Rückzug über - xanthir.com/b4o00

21

@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.

— Eric Willigers
quelle

7

@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 .

— Rolf
quelle

ikr! Ich mag die Art und Weise, wie ich diese Klassen von Tailwind CSS in verwenden kann @apply. Dies führt zu einer außergewöhnlich neuen Art der Arbeit mit Stylesheets, bei der Sie wiederverwendbare Bausteine erhalten, die ebenfalls leicht kategorisiert werden können. Sie können sie tatsächlich sortieren (Sie können hierfür eine Referenz verwenden, wie ich aus der ToC of Tailwind CSS-Dokumentation) und keine Eigenschaften mehr zum Scannen von Stylesheets effizient! Es gibt viele Möglichkeiten, wie einfach pinalles zu schreiben top/bottom/left/right: 0.

— vintproykt