Currying in CSS | CSS-Tricks

Lustiger Zufall, ich habe mir gerade die Website für Utopia angesehen (ein responsives Typografieprojekt, von dem ich zugeben muss, dass ich es nicht vollständig verstehe) und bin auf etwas CSS gestoßen, das sie präsentieren und das so aussah:

:root {
  --fluid-max-negative: (1 / var(--fluid-max-ratio) / var(--fluid-max-ratio));
  --fluid-min-negative: (1 / var(--fluid-min-ratio) / var(--fluid-min-ratio));
 
  ...
}

Sehen Sie etwas Seltsames dort? Dieser Code verwendet mathematische Operatoren, aber es gibt keine calc()-Funktion, die ihn umschließt.

Gerade als meine Neugier geweckt war, hat Trys Mudford, ein Erfinder von Utopia, darüber gebloggt

Der Wert nach dem : in der CSS-Benutzereigenschaft muss kein gültiges CSS sein. Er verursacht keine Fehler und macht die Benutzereigenschaft nicht ungültig. Er wird im Browser erst ausgewertet, wenn er verwendet wird, oder genauer gesagt, wenn er in eine calc() -Funktion eingefügt wird.

Hier ist ein konstruiertes Beispiel

:root {
  --padding: 1rem;
  
  /* These are meaningless alone */
  --padding-S: var(--padding) / 2;
  --padding-L: var(--padding) * 2;
}

.module--large {
  /* But they evaluate once they are in a calc() */
  padding: calc(var(--padding-L));
}

Nach meinem begrenzten Verständnis sind Currying wie Funktionen, die Funktionen zurückgeben. Ich nehme an, das ist irgendwie so, dass die alternativen Padding-Eigenschaften oben wie abgeleitete Funktionen der Haupt-Padding-Funktion sind (wenn man sie so nennen kann), und man ruft sie nur auf und führt sie bei Bedarf aus.

David Ron

# 7. März 2020

Higher-Order-Funktionen sind Funktionen, die Funktionen zurückgeben. Currying ist die Umwandlung einer Funktion, die mehrere Parameter annimmt, in eine Higher-Order-Funktion, die einen einzelnen Parameter annimmt und eine Funktion zurückgibt, die „die restlichen“ annimmt (wobei derselbe Prozess fortgesetzt wird, bis alle Funktionen einen Parameter annehmen).

Ein normaler Funktionsaufruf würde also so aussehen:
tell(Bob,"hallo",5)

Die Curried-Form könnte so aussehen:
tell(Bob)("hallo")(5)

Manche würden Currying als eine spezielle Form der partiellen Anwendung betrachten, bei der die Arität aller Funktionen immer 1 ist. Daher kann man Currying in JavaScript oft durch Werkzeuge erreichen, die zur partiellen Anwendung gedacht sind.

Ich bin mir nicht sicher, wie dieser Artikel über Currying handelt, aber ich kann sehen, wie er sich auf Higher-Order-Funktionen beziehen könnte.

Kommentare