Das Modulsystem wurde eingeführt

Das Sass-Team wusste seit Jahren, dass die @import-Regel, eine der frühesten Ergänzungen zu Sass, nicht so gut war, wie wir es uns gewünscht hätten. Sie verursachte eine Fülle von Problemen für unsere Benutzer

• Es war fast unmöglich herauszufinden, wo eine bestimmte Variable, ein Mixin oder eine Funktion (gemeinsam als "Mitglieder" bezeichnet) ursprünglich definiert wurde, da alles, was in einer Stylesheet-Datei definiert wurde, für alle Stylesheet-Dateien verfügbar war, die danach importiert wurden wurden.

• Selbst wenn Sie sich entschieden hätten, jede Stylesheet-Datei, die von Ihnen verwendete Mitglieder definierte, explizit zu importieren, hätten Sie Duplikate von CSS und seltsame Nebeneffekte erhalten, da Stylesheet-Dateien jedes Mal von Grund auf neu geladen wurden, wenn sie importiert wurden.

• Es war nicht sicher, kurze und einfache Namen zu verwenden, da immer die Möglichkeit bestand, dass eine andere Stylesheet-Datei irgendwo in Ihrer Anwendung denselben Namen verwenden und Ihre Logik durcheinander bringen würde. Um sicherzugehen, mussten Benutzer manuell lange, umständliche Namensräume zu allem hinzufügen, was sie definierten.

• Bibliotheksautoren hatten keine Möglichkeit sicherzustellen, dass ihre privaten Helfer nicht von nachgelagerten Benutzern abgerufen werden konnten, was zu Verwirrung und Kompatibilitätsproblemen führte führte.

• Die @extend-Regel konnte jeden Selektor überall in der Stylesheet-Datei beeinflussen, nicht nur diejenigen, die der Autor ausdrücklich ausgewählt hatte, zu erweitern.

Wir wussten auch, dass jede von uns einzuführende Ersetzung mit äußerster Sorgfalt entworfen und entwickelt werden musste, um sicherzustellen, dass sie eine felsenfeste Grundlage für die Zukunft der Sass-Entwicklung bietet. In den letzten Jahren haben wir ein brandneues Modulsystem diskutiert, entworfen und entwickelt, das diese Probleme und mehr löst, und heute freuen wir uns, Ihnen mitteilen zu können, dass es in Dart Sass 1.23.0 verfügbar ist.

Bitte beachten Sie, dass das Modulsystem *vollständig abwärtskompatibel* ist. Keine vorhandenen Funktionen wurden entfernt oder als veraltet markiert, und Ihre aktuellen Sass-Stylesheet-Dateien funktionieren weiterhin wie bisher. Wir haben das Modulsystem so konzipiert, dass es vollständig interoperabel mit @import ist, um es Stylesheet-Autoren zu erleichtern, es schrittweise zu migrieren. Wir planen, @import langfristig abzuschaffen, aber erst, nachdem jeder die Möglichkeit hatte, zu migrieren.

@use, das Herzstück des Modulsystems@use, das Herzstück des Modulsystems Permalink

Die @use-Regel ist der primäre Ersatz für @import: Sie macht CSS, Variablen, Mixins und Funktionen aus einer anderen Stylesheet-Datei in der aktuellen Stylesheet-Datei zugänglich. Standardmäßig sind Variablen, Mixins und Funktionen in einem Namensraum verfügbar, der auf dem Basisnamen der URL basiert.

@use "bootstrap";

.element {
  background-color: bootstrap.$body-bg;
  @include bootstrap.float-left;
}

Neben der Namensraumung gibt es einige wichtige Unterschiede zwischen @use und @import

• @use führt eine Stylesheet-Datei nur einmal aus und fügt deren CSS nur einmal ein, unabhängig davon, wie oft diese Stylesheet-Datei verwendet wird.
• @use macht Namen nur in der aktuellen Stylesheet-Datei verfügbar, im Gegensatz zu global.
• Mitglieder, deren Namen mit - oder _ beginnen, sind mit @use für die aktuelle Stylesheet-Datei privat.
• Wenn eine Stylesheet-Datei @extend enthält, wird diese Erweiterung nur auf Stylesheet-Dateien angewendet, die sie importiert, nicht auf Stylesheet-Dateien, die sie importieren.

Beachten Sie, dass Platzhalterselektoren *nicht* namensraumig sind, aber sie *respektieren* die Privatsphäre.

Namensräume steuernNamensräume steuern Permalink

Obwohl der Standard-Namensraum einer @use-Regel durch den Basisnamen ihrer URL bestimmt wird, kann er auch explizit mit as festgelegt werden.

@use "bootstrap" as b;

.element {
  @include b.float-left;
}

Der spezielle Konstrukt as * kann auch verwendet werden, um alles in den Top-Level-Namensraum einzuschließen. Beachten Sie, dass Sass einen Fehler ausgibt, wenn mehrere Module Mitglieder mit demselben Namen bereitstellen und mit as * verwendet werden.

@use "bootstrap" as *;

.element {
  @include float-left;
}

Bibliotheken konfigurierenBibliotheken konfigurieren Permalink

Bei @import werden Bibliotheken oft durch Festlegen globaler Variablen konfiguriert, die !default-Variablen überschreiben, die von diesen Bibliotheken definiert wurden. Da Variablen mit @use nicht mehr global sind, unterstützt es eine explizitere Methode zur Konfiguration von Bibliotheken: die with-Klausel.

// bootstrap.scss
$paragraph-margin-bottom: 1rem !default;

p {
  margin-top: 0;
  margin-bottom: $paragraph-margin-bottom;
}

@use "bootstrap" with (
  $paragraph-margin-bottom: 1.2rem
);

Dies setzt die Variable $paragraph-margin-bottom von Bootstrap auf 1.2rem, bevor sie ausgewertet wird. Die with-Klausel erlaubt nur Variablen, die im zu importierenden Modul definiert (oder weitergeleitet) sind, und nur, wenn sie mit !default definiert sind, sodass Benutzer vor Tippfehlern geschützt sind.

@forward, für Bibliotheksautoren@forward, für Bibliotheksautoren Permalink

Die @forward-Regel schließt Variablen, Mixins und Funktionen eines anderen Moduls als Teil der vom aktuellen Modul bereitgestellten API ein, ohne sie für Code innerhalb des aktuellen Moduls sichtbar zu machen. Sie ermöglicht es Bibliotheksautoren, ihre Bibliothek auf viele verschiedene Quelldateien aufzuteilen, ohne die Lokalität innerhalb dieser Dateien zu opfern. Im Gegensatz zu @use fügt forward keine Namensräume zu Namen hinzu.

// bootstrap.scss
@forward "functions";
@forward "variables";
@forward "mixins";

SichtbarkeitskontrollenSichtbarkeitskontrollen Permalink

Eine @forward-Regel kann wählen, nur bestimmte Namen anzuzeigen.

@forward "functions" show color-yiq;

Sie kann auch Namen ausblenden, die als bibliotheksintern gelten.

@forward "functions" hide assert-ascending;

Zusätzliche PräfixeZusätzliche Präfixe Permalink

Wenn Sie ein untergeordnetes Modul über ein All-in-One-Modul weiterleiten, möchten Sie diesem Modul möglicherweise einen manuellen Namensraum hinzufügen. Dies können Sie mit der as-Klausel tun, die jedem weitergeleiteten Mitgliedsnamen ein Präfix hinzufügt, das weitergeleitet wird.

// material/_index.scss
@forward "theme" as theme-*;

Auf diese Weise können Benutzer das All-in-One-Modul mit gut abgegrenzten Namen für Themen variablen verwenden.

@use "material" with ($theme-primary: blue);

oder sie können das untergeordnete Modul mit einfacheren Namen verwenden.

@use "material/theme" with ($primary: blue);

Integrierte ModuleIntegrierte Module Permalink

Das neue Modulsystem fügt integrierte Module (sass:math, sass:color, sass:string, sass:list, sass:map, sass:selector und sass:meta) hinzu, um alle vorhandenen integrierten Sass-Funktionen zu speichern. Da diese Module (typischerweise) mit einem Namensraum importiert werden, ist es nun viel einfacher, Sass-Funktionen zu verwenden, ohne auf Konflikte mit einfachen CSS Funktionen zu stoßen.

Dies wiederum macht es für Sass sicherer, neue Funktionen hinzuzufügen. Wir erwarten, dass wir in Zukunft eine Reihe von Komfortfunktionen zu diesen Modulen hinzufügen werden. werden.

Umbenannte FunktionenUmbenannte Funktionen Permalink

Einige Funktionen haben in den integrierten Modulen andere Namen als in den globalen Funktionen. Integrierte Funktionen, die bereits manuelle Namensräume hatten, wie z. B. map-get(), haben in den integrierten Modulen diese Namensräume entfernt, sodass Sie einfach map.get() schreiben können. Ebenso sind adjust-color(), scale-color() und change-color() jetzt color.adjust(), color.scale() und color.change().

Wir haben diese Gelegenheit auch genutzt, um ein paar verwirrende alte Funktionsnamen zu ändern. unitless() heißt jetzt math.is-unitless() und comparable() heißt jetzt math.compatible().

Entfernte FunktionenEntfernte Funktionen Permalink

Die Kurzschreib-Farbfunktionen von Sass lighten(), darken(), saturate(), desaturate(), opacify(), fade-in(), transparentize() und fade-out() hatten alle ein sehr unintuitives Verhalten. Anstatt ihre zugehörigen Attribute fließend zu skalieren, erhöhten sie sie nur um einen festen Betrag, sodass lighten($color, 20%) für eine Farbe mit einer Helligkeit von 85 % white zurückgab, anstatt eine Farbe mit einer Helligkeit von 88 % zurückzugeben (20 % näher an voller Weiß).

Um uns auf dem Weg zur Behebung dieses Problems zu helfen, sind diese Funktionen (zusammen mit adjust-hue()) nicht in den neuen integrierten Modulen enthalten. Sie können immer noch denselben Effekt erzielen, indem Sie color.adjust() aufrufen – zum Beispiel ist lighten($color, $amount) äquivalent zu color.adjust($color, $lightness: $amount) –, aber wir empfehlen, wenn möglich color.scale() zu verwenden, da dies wesentlich intuitiver ist.

Zu einem späteren Zeitpunkt planen wir, color.lighten() und ähnliche Funktionen als Kurzformen für color.scale() hinzuzufügen.

meta.load-css()meta.load-css() Permalink

Das neue Modulsystem wird mit einem neuen integrierten Mixin geliefert: meta.load-css($url, $with: ()). Dieses Mixin lädt dynamisch das Modul mit der angegebenen URL und fügt dessen CSS ein (obwohl seine Funktionen, Variablen und Mixins nicht verfügbar gemacht werden). Dies ist ein Ersatz für verschachtelte Importe und hilft, einige Anwendungsfälle dynamischer Importe zu bewältigen, ohne viele der Probleme, die entstehen würden, wenn neue Mitglieder dynamisch geladen werden könnten könnten.

@import-Kompatibilität@import-Kompatibilität Permalink

Das Sass-Ökosystem wird nicht über Nacht auf @use umsteigen, daher muss es in der Zwischenzeit gut mit @import interoperabel sein. Dies wird in beide Richtungen unterstützt.

• Wenn eine Datei, die @imports enthält, mit @use verwendet wird, werden alle Elemente in ihrem globalen Namensraum als ein einziges Modul behandelt. Die Mitglieder dieses Moduls werden dann unter Verwendung seines Namensraums wie üblich referenziert.

• Wenn eine Datei, die @uses enthält, mit @import importiert wird, werden alle Elemente ihrer öffentlichen API zum globalen Geltungsbereich der importierenden Stylesheet-Datei hinzugefügt. Dies ermöglicht es einer Bibliothek, zu steuern, welche spezifischen Namen sie exportiert, selbst für Benutzer, die sie mit @import statt @use importieren.

Um es Bibliotheken zu ermöglichen, ihre bestehende, auf @import ausgerichtete API beizubehalten, mit expliziter Namensraumung, wo nötig, fügt dieser Vorschlag auch Unterstützung für Dateien hinzu, die nur für @import sichtbar sind, nicht für @use. Sie werden als "file.import.scss" geschrieben und importiert, wenn der Benutzer @import "file" schreibt.

Automatische MigrationAutomatische Migration Permalink

Parallel zur Einführung des neuen Modulsystems führen wir einen neuen automatisierten Sass-Migrator ein. Dieses Tool erleichtert die automatische Migration der meisten Stylesheet-Dateien zur Verwendung des neuen Modulsystems. Befolgen Sie die Anweisungen auf der Sass-Website, um es zu installieren, und führen Sie es dann auf Ihrer Anwendung aus.

$ sass-migrator module --migrate-deps <path/to/style.scss>

Die --migrate-deps-Flagge weist den Migrator an, nicht nur die angegebene Datei zu migrieren, sondern auch alles, was sie importiert. Der Migrator erkennt automatisch Dateien, die über die node_modules-Syntax von Webpack importiert werden, aber Sie können auch explizite Lade Pfade mit der --load-path-Flagge angeben.

Wenn Sie möchten, dass der Migrator Ihnen mitteilt, welche Änderungen er vornehmen würde, ohne sie tatsächlich vorzunehmen, verwenden Sie sowohl die --dry-run-Flagge als auch die --verbose-Flagge, um ihn anzuweisen, nur die Änderungen auszugeben, die er vornehmen würde, ohne sie auf der Festplatte zu speichern.

Migration einer BibliothekMigration einer Bibliothek Permalink

Wenn Sie eine Sass-Bibliothek migrieren möchten, die für nachgelagerte Benutzer zum Laden und Verwenden bestimmt ist, führen Sie

$ sass-migrator module --migrate-deps --forward=all <path/to/index.scss>

Die --forward-Flagge weist den Migrator an, @forward-Regeln hinzuzufügen, sodass Benutzer weiterhin alle Mixins, Variablen und Funktionen, die Ihre Bibliothek definiert, mit einem einzigen @use laden können.

Wenn Sie einen manuellen Namensraum zu Ihrer Bibliothek hinzugefügt haben, um Namenskonflikte zu vermeiden, wird der Migrator ihn für Sie entfernen, wenn Sie die --remove-prefix-Flagge übergeben. Sie können sogar wählen, nur Mitglieder weiterzuleiten, die ursprünglich dieses Präfix hatten, indem Sie --forward=prefixed übergeben.

Probleme meldenProbleme melden Permalink

Das Migrationstool ist brandneu, daher kann es noch einige Ecken und Kanten haben. Wenn Sie auf Probleme stoßen, zögern Sie bitte nicht, ein Problem auf GitHub zu melden!

Jetzt ausprobieren!Jetzt ausprobieren! Permalink

Das Modulsystem ist als Teil von Dart Sass 1.23.0 verfügbar. Sie können es ab sofort installieren mit

$ npm install -g sass

Alternativ können Sie sich die Installationsseite für alle verschiedenen Möglichkeiten ansehen, wie es installiert werden kann!

Zukünftige PläneZukünftige Pläne Permalink

Das Sass-Team möchte eine lange Zeit zulassen, in der @use und @import koexistieren können, um dem Ökosystem bei der reibungslosen Migration zum neuen System zu helfen. Das endgültige Ziel, @import vollständig abzuschaffen, ist jedoch für Einfachheit, Leistung und CSS-Kompatibilität. Daher planen wir, die Unterstützung für @import schrittweise nach folgendem Zeitplan einzustellen.

• Ein Jahr nach der Einführung der Unterstützung für das Modulsystem durch Dart Sass und LibSass *oder* zwei Jahre nach der Einführung der Unterstützung für das Modulsystem durch Dart Sass, je nachdem, welcher Zeitpunkt früher eintritt (spätestens am **1. Oktober 2021**), werden wir @import sowie globale Kernbibliotheksfunktionsaufrufe, die über Module erfolgen könnten, als veraltet kennzeichnen.

• Ein Jahr nach Inkrafttreten dieser Kennzeichnung als veraltet (spätestens am **1. Oktober 2022**) werden wir die Unterstützung für @import und die meisten globalen Funktionen vollständig einstellen. Dies wird eine Hauptversionsfreigabe für alle Implementierungen beinhalten.

Dies bedeutet, dass es mindestens zwei volle Jahre geben wird, in denen @import und @use gleichzeitig nutzbar sind, und in der Praxis wahrscheinlich näher an drei Jahre.

Juli 2022: Angesichts der Tatsache, dass LibSass vor der Einführung der Unterstützung für das neue Modulsystem als veraltet eingestuft wurde, wurde der Zeitplan für die Kennzeichnung als veraltet und die Entfernung von @import verschoben. Wir beabsichtigen nun, zu warten, bis 80 % der Benutzer Dart Sass verwenden (gemessen an npm-Downloads), bevor wir @import als veraltet kennzeichnen, und dann mindestens ein Jahr danach und wahrscheinlich länger, bevor wir es vollständig entfernen.