Request for Comments: First-Class Calc

Eines der absolut am häufigsten nachgefragten Features in Sass ist die Möglichkeit, einfacher mit calc()-Ausdrücken zu arbeiten. Diese Ausdrücke wurden bisher undurchsichtig geparst: Zwischen den Klammern kann jeder beliebige Text stehen, und Sass behandelt ihn einfach als ungequotete Zeichenkette. Das hat den Parser von Sass vereinfacht, da wir die spezielle calc()-Mikrosyntax nicht unterstützen müssen, und es bedeutete, dass wir neue Features wie die Verwendung von CSS-Variablen innerhalb von calc() automatisch unterstützen.

Allerdings hat dies auch erhebliche Nachteile für die Benutzerfreundlichkeit. Da jedes calc() für den Sass-Parser völlig undurchsichtig ist, können Benutzer Sass-Variablen nicht einfach anstelle von Werten verwenden; sie müssen Variablen explizit interpolieren. Und sobald ein calc()-Ausdruck erstellt wurde, gibt es keine Möglichkeit, ihn mit Sass zu manipulieren, so wie Sie eine einfache Zahl manipulieren können.

Das wollen wir mit einem neuen Vorschlag ändern, den wir "First-Class Calc" nennen. Dieser Vorschlag ändert die Art und Weise, wie calc() (und andere unterstützte mathematische Funktionen) geparst werden: von ungequoteten Zeichenketten zu einer detaillierten Analyse, die manchmal (aber nicht immer) einen neuen Datentyp namens "calculation" erzeugt. Dieser Datentyp repräsentiert mathematische Ausdrücke, die zur Kompilierungszeit nicht aufgelöst werden können, wie z. B. calc(10% + 5px), und ermöglicht es, diese Ausdrücke nahtlos in weitere mathematische Funktionen zu integrieren.

Genauer gesagt: Ein calc()-Ausdruck wird gemäß der CSS-Syntax geparst, mit zusätzlicher Unterstützung für Sass-Variablen, -Funktionen und (zur Abwärtskompatibilität) Interpolation. Sass führt so viel Mathematik wie möglich zur Kompilierungszeit durch, und wenn das Ergebnis eine einzelne Zahl ist, gibt es diese als normale Sass-Zahl zurück. Andernfalls gibt es eine Berechnung zurück, die den (vereinfachten) Ausdruck repräsentiert, der im Browser aufgelöst werden kann.

Zum Beispiel

• calc(1px + 10px) gibt die Zahl 11px zurück.

• Ebenso, wenn $length 10px ist, gibt calc(1px + $length) 11px zurück.

• calc(1px + 10%) gibt jedoch die Berechnung calc(1px + 10%) zurück.

• Wenn $length calc(1px + 10%) ist, gibt calc(1px + $length) calc(2px + 10%) zurück.

• Sass-Funktionen können direkt in calc() verwendet werden, sodass calc(1% + math.round(15.3px)) calc(1% + 15px) zurückgibt.

Beachten Sie, dass Berechnungen im Allgemeinen nicht anstelle von Zahlen verwendet werden können. Zum Beispiel führt 1px + calc(1px + 10%) zu einem Fehler, ebenso wie math.round(calc(1px + 10%)). Das liegt daran, dass Berechnungen nicht mit Zahlen austauschbar sind (Sie können keine Berechnung an math.sqrt() übergeben), daher möchten wir sicherstellen, dass mathematische Funktionen explizit angeben, ob sie Berechnungen unterstützen, indem sie entweder ihre gesamte Mathematik in calc() einschließen oder normale Sass- Arithmetik verwenden.

Aus Gründen der Abwärtskompatibilität werden calc()-Ausdrücke, die Interpolation enthalten, weiterhin mit der alten, sehr permissiven Syntax geparst, obwohl dieses Verhalten schließlich als veraltet eingestuft und entfernt wird. Diese Ausdrücke geben weiterhin Berechnungs-Werte zurück, werden aber niemals vereinfacht oder zu einfachen Zahlen aufgelöst.

Lassen Sie uns wissen, was Sie denken!Lassen Sie uns wissen, was Sie denken! Permalink

Wenn Sie mehr über diesen Vorschlag erfahren möchten, lesen Sie ihn vollständig auf GitHub. Er ist für den nächsten Monat für Kommentare und Überarbeitungen geöffnet. Wenn Sie also möchten, dass sich etwas ändert, erstellen Sie bitte ein Issue und wir können ihn besprechen!