Breaking Change: Strikte unäre Operatoren

Sass hat historisch erlaubt, dass - und + auf Arten verwendet werden, die es zweifelhaft machen, ob der Autor sie als binären oder unären Operator meinte. Diese verwirrende Syntax wird eingestellt.

Wie wird diese Eigenschaft kompiliert?

Spielplatz

SCSS-Syntax

$size: 10px;

div {
  margin: 15px -$size;
}
Spielplatz

Sass-Syntax

$size: 10px

div
  margin: 15px -$size

Manche Benutzer würden sagen: "Das - ist an $size angehängt, also sollte es margin: 20px -10px sein". Andere würden sagen: "Das - befindet sich zwischen 20px und $size, also sollte es margin: 5px sein." Sass stimmt derzeit der letzteren Meinung zu, aber das eigentliche Problem ist, dass es ohnehin so verwirrend ist! Dies ist eine natürliche, aber unglückliche Folge der CSS-Leerzeichen-getrennten Listen-Syntax in Kombination mit der Sass-Arithmetik-Syntax.

Deshalb führen wir dies zu einem Fehler ein. In Zukunft, wenn Sie einen binären - oder + Operator verwenden möchten (d. h. einen, der zwei Zahlen subtrahiert oder addiert), müssen Sie auf beiden Seiten Leerzeichen einfügen oder auf keiner Seite.

  • Gültig: 15px - $size
  • Gültig: (15px) - $size
  • Ungültig: 15px -$size

Wenn Sie einen unären - oder + Operator als Teil einer Leerzeichen-getrennten Liste verwenden möchten, müssen Sie ihn (immer noch) in Klammern setzen.

  • Gültig: 15px (-$size)

ÜbergangszeitraumÜbergangszeitraum Permalink

Kompatibilität
Dart Sass
seit 1.55.0
LibSass
✗
Ruby Sass
✗

Wir werden dies in Dart Sass 2.0.0 zu einem Fehler machen, aber bis dahin wird nur eine Warnung ausgegeben.

💡 Lustige Tatsache

Denken Sie daran, dass Sie Deprecation-Warnungen von Bibliotheken, die Sie nicht kontrollieren, unterdrücken können! Wenn Sie die Befehlszeilenschnittstelle verwenden, können Sie das Flag --quiet-deps übergeben, und wenn Sie die JavaScriptAPI verwenden, können Sie die Option quietDeps auf true setzen.

Automatische MigrationAutomatische Migration Permalink

Sie können den Sass-Migrator verwenden, um Ihre Stylesheets automatisch zu aktualisieren, indem Sie nach allen - oder + Operatoren, die dies benötigen, ein Leerzeichen hinzufügen. Dies bewahrt das bestehende Verhalten dieser Stylesheets.

$ npm install -g sass-migrator
$ sass-migrator strict-unary **/*.scss

Kann ich die Warnungen unterdrücken?

Sass bietet eine leistungsstarke Reihe von Optionen zur Verwaltung, welche Deprecations-Warnungen Sie wann sehen.

Terse- und Verbose-Modus

Standardmäßig läuft Sass im Terse-Modus, in dem jede Art von Deprecations-Warnung nur fünfmal ausgegeben wird, bevor weitere Warnungen unterdrückt werden. Dies stellt sicher, dass die Benutzer wissen, wann sie sich einer bevorstehenden Breaking Change bewusst sein müssen, ohne eine überwältigende Menge an Konsolenrauschen zu erzeugen.

Wenn Sie stattdessen Sass im Verbose-Modus ausführen, wird jede Deprecations-Warnung ausgegeben. Dies kann nützlich sein, um die verbleibende Arbeit bei der Behebung von Deprecations zu verfolgen. Sie können den Verbose-Modus mit dem Flag --verbose in der Befehlszeile oder der Option verbose in der JavaScript API aktivieren.

⚠️ Vorsicht!

Wenn Sass über die JS API ausgeführt wird, teilt Sass keine Informationen über Kompilierungen hinweg. Daher werden standardmäßig fünf Warnungen für *jedes kompilierte Stylesheet* ausgegeben. Sie können dies jedoch beheben, indem Sie einen benutzerdefinierten Logger schreiben (oder den Autor Ihres bevorzugten Frameworks dazu auffordern, dies zu tun), der nur fünf Fehler pro Deprecation ausgibt und über mehrere Kompilierungen hinweg geteilt werden kann.

Deprecations in Abhängigkeiten unterdrücken

Manchmal haben Ihre Abhängigkeiten Deprecations-Warnungen, auf die Sie keinen Einfluss haben. Sie können Deprecations-Warnungen von Abhängigkeiten unterdrücken, während sie für Ihre Anwendung weiterhin ausgegeben werden, indem Sie das Flag --quiet-deps in der Befehlszeile oder die Option quietDeps in der JavaScript API verwenden.

Für die Zwecke dieses Flags ist eine "Abhängigkeit" jedes Stylesheet, das keine reine Serie relativer Ladevorgänge vom Einstiegs-Stylesheet ist. Das bedeutet alles, was von einem Lade-Pfad kommt, und die meisten Stylesheets, die über benutzerdefinierte Importer geladen werden.

Spezifische Deprecations unterdrücken

Wenn Sie wissen, dass eine bestimmte Deprecation für Sie kein Problem darstellt, können Sie Warnungen für diese spezifische Deprecation unterdrücken, indem Sie das Flag --silence-deprecation in der Befehlszeile oder die Option silenceDeprecations in der JavaScript API verwenden.