dart sass
1.81.0
Eine Dart-Implementierung von Sass. Mit Sass macht CSS Spaß .
Mit Dart Sass
sass_api -Paket
Dart Sass im Browser
Legacy-JavaScript-API
Sass mit Jest verwenden
Von Chocolatey oder Scoop (Windows)
Von Homebrew (macOS)
Standalone
Von npm
Aus der Kneipe
Von der Quelle
Im Docker
Warum Dart?
Kompatibilitätsrichtlinie
Browserkompatibilität
Node.js-Kompatibilität
Ungültiges CSS
Eingebetteter Dart Sass
Verwendung
Verhaltensunterschiede zu Ruby Sass
Abhängig von Ihrer Umgebung und Ihren Anforderungen gibt es verschiedene Möglichkeiten, Dart Sass zu installieren und auszuführen.
Wenn Sie den Chocolatey-Paketmanager oder den Scoop-Paketmanager für Windows verwenden, können Sie Dart Sass durch Ausführen installieren
Choco Sass installieren
oder
scoop sass installieren
Dadurch erhalten Sie eine ausführbare sass -Datei auf Ihrer Befehlszeile, die Dart Sass ausführt. Weitere Informationen finden Sie in den CLI-Dokumenten.
Wenn Sie den Homebrew-Paketmanager verwenden, können Sie Dart Sass durch Ausführen installieren
brew installiere sass/sass/sass
Dadurch erhalten Sie eine ausführbare sass -Datei auf Ihrer Befehlszeile, die Dart Sass ausführt.
Sie können das eigenständige Dart Sass-Archiv für Ihr Betriebssystem – das die Dart-VM und den Snapshot der ausführbaren Datei enthält – von der GitHub-Release-Seite herunterladen. Extrahieren Sie es, fügen Sie das Verzeichnis zu Ihrem Pfad hinzu, starten Sie Ihr Terminal neu und schon ist die ausführbare sass Datei betriebsbereit!
Dart Sass ist in JavaScript kompiliert als npm-Paket verfügbar. Sie können es global mit npm install -g sass installieren, was Zugriff auf die ausführbare sass ermöglicht. Sie können es auch mit npm install --save-dev sass zu Ihrem Projekt hinzufügen. Dies stellt die ausführbare Datei sowie eine Bibliothek bereit:
const sass = require('sass');const result = sass.compile(scssFilename);// ODER// Beachten Sie, dass „compileAsync()“ wesentlich langsamer ist als „compile()“.const result = waiting sass.compileAsync( scssDateiname);Die vollständige API-Dokumentation finden Sie auf der Sass-Website.
Das sass npm-Paket kann auch direkt im Browser ausgeführt werden. Es ist mit allen wichtigen Web-Bundlern kompatibel, solange Sie das Umbenennen deaktivieren (z. B. --keep-names in esbuild). Sie können es auch ohne Bündelung direkt aus einem Browser als ECMAScript-Modul importieren (vorausgesetzt, node_modules wird ebenfalls bereitgestellt):
<script type="importmap">
{"imports": { "immutable": "./node_modules/immutable/dist/immutable.es.js", "sass": "./node_modules/sass/sass.default.js"}
}</script><!-- Unterstützt Browser wie Safari 16.3 ohne Unterstützung für den Import von Karten. --><script async src="https://unpkg.com/es-module-shims@^1.7.0" crossorigin="anonymous"></script><script type="module">
import * as sass from 'sass';
console.log(sass.compileString(` .box { width: 10px + 15px; } `));</script>Oder von einem CDN:
<script type="importmap">
{"imports": { "immutable": "https://unpkg.com/immutable@^4.0.0", "sass": "https://unpkg.com/sass@^1.63.0/sass.default .js"}
}</script><!-- Unterstützt Browser wie Safari 16.3 ohne Unterstützung für den Import von Karten. --><script async src="https://unpkg.com/es-module-shims@^1.7.0" crossorigin="anonymous"></script><script type="module">
import * as sass from 'sass';
console.log(sass.compileString(` .box { width: 10px + 15px; } `));</script>Oder sogar gebündelt mit all seinen Abhängigkeiten:
<script type="module">
* als Sass von „https://jspm.dev/sass“ importieren;
console.log(sass.compileString(` .box { width: 10px + 15px; } `));</script> Da der Browser keinen Zugriff auf das Dateisystem hat, stehen ihm die Funktionen compile() und compileAsync() nicht zur Verfügung. Wenn Sie andere Dateien laden möchten, müssen Sie einen benutzerdefinierten Importer an compileString() oder compileStringAsync() übergeben. Auch die Legacy-API wird im Browser nicht unterstützt.
Dart Sass unterstützt auch eine ältere JavaScript-API, die vollständig mit Node Sass kompatibel ist (mit einigen unten aufgeführten Ausnahmen) und sowohl die Funktionen render() als auch renderSync() unterstützt. Diese API gilt als veraltet und wird in Dart Sass 2.0.0 entfernt, daher sollte sie in neuen Projekten vermieden werden.
Für die Unterstützung der alten JavaScript-API durch Sass gelten die folgenden Einschränkungen:
Es werden nur die Werte "expanded" und "compressed" von outputStyle unterstützt.
Dart Sass unterstützt die precision nicht. Dart Sass verwendet standardmäßig eine ausreichend hohe Präzision für alle vorhandenen Browser, und wenn man diese anpassbar macht, würde der Code wesentlich weniger effizient sein.
Dart Sass unterstützt die Option sourceComments nicht. Quellkarten sind die empfohlene Methode zum Lokalisieren des Ursprungs generierter Selektoren.
Wenn Sie Jest zum Ausführen Ihrer Tests verwenden, beachten Sie, dass es einen seit langem bestehenden Fehler aufweist, bei dem die Standardtestumgebung den integrierten instanceof von JavaScript unterbricht. Das JS-Paket von Dart Sass nutzt instanceof ziemlich häufig. Um Sass nicht zu beschädigen, müssen Sie jest-environment-node-single-context installieren und testEnvironment: 'jest-environment-node-single-context' zu Ihrer Jest-Konfiguration hinzufügen .
Wenn Sie ein Dart-Benutzer sind, können Sie Dart Sass global mit pub global activate sass installieren, wodurch eine ausführbare sass bereitgestellt wird. Sie können es auch zu Ihrer Pubspec hinzufügen und als Bibliothek verwenden. Wir empfehlen dringend, es mit dem Präfix sass zu importieren:
import 'package:sass/sass.dart' as sass;void main(List<String> args) { print(sass.compile(args.first));
}Weitere Informationen finden Sie in den Dart-API-Dokumenten.
sass_api -Paket Dart-Benutzer haben über das Paket sass_api auch Zugriff auf detailliertere APIs. Dies bietet Zugriff auf den Sass AST und die APIs zum Auflösen von Sass-Ladevorgängen, ohne eine vollständige Kompilierung ausführen zu müssen. Es ist in ein eigenes Paket aufgeteilt, sodass es seine Versionsnummer unabhängig vom Haupt sass -Paket erhöhen kann.
Vorausgesetzt, Sie haben dieses Repository bereits ausgecheckt:
Dart installieren. Wenn Sie ein Archiv manuell herunterladen, anstatt ein Installationsprogramm zu verwenden, stellen Sie sicher, dass sich das bin -Verzeichnis des SDK in Ihrem PATH befindet.
Installieren Sie Buff. Dies wird zum Erstellen der Protokollpuffer für den eingebetteten Compiler verwendet.
Führen Sie in diesem Repository dart pub get aus. Dadurch werden die Abhängigkeiten von Dart Sass installiert.
Führen Sie dart run grinder protobuf aus. Dadurch wird die eingebettete Protokolldefinition heruntergeladen und erstellt.
Führen Sie dart bin/sass.dart path/to/file.scss aus.
Das ist es!
Sie können Dart Sass in Docker mit den folgenden Dockerfile-Befehlen installieren und ausführen:
# Dart stageFROM bufbuild/buf AS bufFROM dart:stable AS dart# Fügen Sie Ihre SCSS-Dateien hinzuCOPY --from=another_stage /app /app# Include Protocol Buffer BinaryCOPY --from=buf /usr/local/bin/buf /usr/local/ bin/WORKDIR /dart-sassRUN Git-Klon https://github.com/sass/dart-sass.git . && Dart Pub Get && dart run grinder protobuf# Hier führen Sie sass.dart auf Ihren SCSS-Dateien aus. RUN dart ./bin/sass.dart /app/sass/example.scss /app/public/css/example.css
Dart Sass hat Ruby Sass als kanonische Implementierung der Sass-Sprache ersetzt. Wir haben uns für Dart entschieden, weil es eine Reihe von Vorteilen bietet:
Es ist schnell. Die Dart-VM ist hochoptimiert und wird immer schneller (die neuesten Leistungszahlen finden Sie unter perf.md ). Es ist viel schneller als Ruby und kommt C++ nahe.
Es ist tragbar. Die Dart-VM hat keine externen Abhängigkeiten und kann Anwendungen in eigenständige Snapshot-Dateien kompilieren, sodass wir Dart Sass als nur drei Dateien verteilen können (die VM, der Snapshot und ein Wrapper-Skript). Dart kann auch zu JavaScript kompiliert werden, was die Verteilung von Sass über npm vereinfacht, was die Mehrheit unserer Benutzer bereits verwendet.
Es ist einfach zu schreiben. Dart ist eine höhere Sprache als C++, was bedeutet, dass es keinen großen Aufwand mit Speicherverwaltung und Build-Systemen erfordert. Es ist außerdem statisch typisiert, wodurch es einfacher ist, große Refaktoren sicher durchzuführen als mit Ruby.
Es ist freundlicher für Mitwirkende. Dart ist wesentlich einfacher zu erlernen als Ruby und insbesondere viele Sass-Nutzer bei Google sind bereits damit vertraut. Mehr Mitwirkende führen zu einer schnelleren und konsistenteren Entwicklung.
Dart Sass folgt größtenteils der semantischen Versionierung. Wir betrachten alles Folgende als Teil der versionierten API:
Die von Dart Sass implementierte Sass-Sprachsemantik.
Die Dart-API.
Die JavaScript-API.
Die Befehlszeilenschnittstelle.
Da Dart Sass über eine einzige Version verfügt, die von allen Dart-, JavaScript- und Standalone-Distributionen gemeinsam genutzt wird, kann dies bedeuten, dass wir die Hauptversionsnummer erhöhen, obwohl es tatsächlich keine wichtigen Änderungen für eine oder mehrere Distributionen gibt. Wir werden jedoch versuchen, die Anzahl der von uns vorgenommenen Breaking Changes zu begrenzen und sie in so wenigen Releases wie möglich zu gruppieren, um die Abwanderung zu minimieren. Wir empfehlen Benutzern dringend, das Änderungsprotokoll zu verwenden, um ein umfassendes Verständnis aller Änderungen in jeder Version zu erhalten.
Es gibt eine Ausnahme, bei der bahnbrechende Änderungen außerhalb einer Hauptversionsrevision vorgenommen werden dürfen. Es kommt gelegentlich vor, dass CSS eine Funktion hinzufügt, die in irgendeiner Weise mit der vorhandenen Sass-Syntax nicht kompatibel ist. Da Sass der vollständigen CSS-Kompatibilität verpflichtet ist, müssen wir gelegentlich die Kompatibilität mit altem Sass-Code unterbrechen, um mit CSS kompatibel zu bleiben.
In diesen Fällen werden wir zunächst eine Version von Sass veröffentlichen, die veraltete Warnungen für alle Stylesheets ausgibt, deren Verhalten sich ändert. Dann werden wir mindestens drei Monate nach der Veröffentlichung einer Version mit diesen Verfallswarnungen eine Nebenversion mit der bahnbrechenden Änderung der Sass-Sprachsemantik veröffentlichen.
Im Allgemeinen betrachten wir jede Änderung an der CSS-Ausgabe von Dart Sass, die dazu führen würde, dass dieses CSS in einem echten Browser nicht mehr funktioniert, als bahnbrechende Änderung. Es gibt jedoch Fälle, in denen eine solche Änderung erhebliche Vorteile hätte und sich nur negativ auf eine kleine Minderheit selten genutzter Browser auswirken würde. Wir möchten eine solche Änderung bei einer Hauptversionsfreigabe nicht blockieren müssen.
Wenn eine Änderung laut StatCounter GlobalStats die Kompatibilität mit weniger als 2 % des weltweiten Marktanteils von Browsern beeinträchtigen würde, veröffentlichen wir möglicherweise eine Nebenversion von Dart Sass mit dieser Änderung.
Wir betrachten die Einstellung der Unterstützung für eine bestimmte Version von Node.js als eine bahnbrechende Änderung , solange diese Version weiterhin von Node.js unterstützt wird. Dies bedeutet, dass Releases gemäß der Node.js-Release-Seite als „Aktuell“, „Aktiv LTS“ oder „Wartung LTS“ aufgeführt sind. Sobald eine Node.js-Version LTS verlässt, hält sich Dart Sass für frei, den Support bei Bedarf einzustellen.
Änderungen am Verhalten von Sass-Stylesheets, die eine ungültige CSS-Ausgabe erzeugen, gelten nicht als Breaking Changes. Solche Änderungen sind fast immer notwendig, wenn Unterstützung für neue CSS-Funktionen hinzugefügt wird, und die Verzögerung aller dieser Funktionen bis zur Veröffentlichung einer neuen Hauptversion wäre für die meisten Benutzer eine übermäßige Belastung.
Als Sass beispielsweise mit dem Parsen von calc() Ausdrücken begann, wurde der ungültige Ausdruck calc(1 +) zu einem Sass-Fehler, während er vorher unverändert durchgereicht wurde. Dies wurde nicht als bahnbrechende Änderung angesehen, da calc(1 +) von Anfang an nie gültiges CSS war.
Dart Sass enthält eine Implementierung der Compiler-Seite des Embedded Sass-Protokolls. Es ist so konzipiert, dass es in eine Host-Sprache eingebettet werden kann, die dann eine API bereitstellt, über die Benutzer Sass aufrufen und benutzerdefinierte Funktionen und Importer definieren können.
sass --embedded startet den eingebetteten Compiler und lauscht auf stdin.
sass --embedded --version gibt versionResponse mit id = 0 in JSON aus und wird beendet.
Das Befehlszeilenflag --embedded ist nicht verfügbar, wenn Sie Dart Sass als npm-Paket installieren. Mit --embedded werden keine anderen Befehlszeilenflags unterstützt.
Es gibt ein paar absichtliche Verhaltensunterschiede zwischen Dart Sass und Ruby Sass. Dies sind im Allgemeinen Orte, an denen Ruby Sass ein unerwünschtes Verhalten aufweist, und es ist wesentlich einfacher, das richtige Verhalten zu implementieren, als kompatibles Verhalten zu implementieren. Diese sollten alle Tracking-Bugs gegen Ruby Sass aufweisen, um das Referenzverhalten zu aktualisieren.
@extend akzeptiert nur einfache Selektoren, ebenso wie das zweite Argument von selector-extend() . Siehe Ausgabe 1599.
Betreffauswahlen werden nicht unterstützt. Siehe Ausgabe 1126.
Pseudo-Selektorargumente werden als <declaration-value> s analysiert, anstatt eine eingeschränktere benutzerdefinierte Analyse durchzuführen. Siehe Ausgabe 2120.
Die numerische Genauigkeit ist auf 10 eingestellt. Siehe Problem 1122.
Der eingerückte Syntaxparser ist flexibler: Er erfordert keine konsistente Einrückung im gesamten Dokument. Siehe Ausgabe 2176.
Farben unterstützen keine kanalweise Arithmetik. Siehe Ausgabe 2144.
Einheitenlose Zahlen sind nicht == zu Einheitszahlen mit demselben Wert. Darüber hinaus folgen Zuordnungsschlüssel derselben Logik wie == -equality. Siehe Ausgabe 1496.
rgba() und hsla() Alphawerte mit Prozenteinheiten werden als Prozentsätze interpretiert. Andere Einheiten sind verboten. Siehe Ausgabe 1525.
Zu viele variable Argumente, die an eine Funktion übergeben werden, sind ein Fehler. Siehe Ausgabe 1408.
Ermöglichen Sie @extend , außerhalb einer Medienabfrage zu erreichen, wenn außerhalb dieser Abfrage ein identisches @extend definiert ist. Dies wird nicht explizit verfolgt, da es irrelevant ist, wenn Problem 1050 behoben ist.
Einige Selektor-Pseudos, die Platzhalter-Selektoren enthalten, werden dort kompiliert, wo sie in Ruby Sass nicht wären. Dies entspricht besser der Semantik der betreffenden Selektoren und ist effizienter. Siehe Ausgabe 2228.
Die altmodische :property value -Syntax wird in der eingerückten Syntax nicht unterstützt. Siehe Ausgabe 2245.
Der Referenzkombinator wird nicht unterstützt. Siehe Ausgabe 303.
Die universelle Selektorvereinheitlichung ist symmetrisch. Siehe Ausgabe 2247.
@extend erzeugt keinen Fehler, wenn es übereinstimmt, die Vereinheitlichung jedoch fehlschlägt. Siehe Ausgabe 2250.
Dart Sass unterstützt derzeit nur UTF-8-Dokumente. Wir würden gerne mehr unterstützen, aber Dart unterstützt sie derzeit nicht. Siehe zum Beispiel dart-lang/sdk#11744.
Haftungsausschluss: Dies ist kein offizielles Google-Produkt.
