Dart Sass

Dart Sass ist die primäre Implementierung von Sass, was bedeutet, dass sie neue Features vor allen anderen Implementierungen erhält. Sie ist schnell, einfach zu installieren und kompiliert zu reinem JavaScript, was die Integration in moderne Webentwicklungs-Workflows erleichtert. Erfahren Sie mehr oder helfen Sie bei der Entwicklung auf GitHub.

KommandozeileKommandozeile Permalink

Die eigenständige Kommandozeilen-Executable von Dart Sass verwendet die blitzschnelle Dart VM, um Ihre Stylesheets zu kompilieren. Um Dart Sass über die Kommandozeile zu installieren, lesen Sie die Installationsanweisungen. Sobald Sie es zum Laufen gebracht haben, können Sie damit Dateien kompilieren 

sass source/index.scss css/index.css

Siehe sass --help für zusätzliche Informationen zur Kommandozeilen-Schnittstelle .

Dart-BibliothekDart-Bibliothek Permalink

Sie können Dart Sass auch als Dart-Bibliothek verwenden, um die Geschwindigkeit der Dart VM plus die Fähigkeit zu nutzen, eigene Funktionen und Importer zu definieren. Um sie zu einem bestehenden Projekt hinzuzufügen 

  1. Installieren Sie das Dart SDK. Stellen Sie sicher, dass das Verzeichnis bin davon in Ihrem PATH ist.

  2. Erstellen Sie eine pubspec.yaml-Datei wie diese

name: my_project
dev_dependencies:
  sass: ^1.79.4

  1. Führen Sie dart pub get aus.

  2. Erstellen Sie eine compile-sass.dart-Datei wie diese

import 'dart:io';
import 'package:sass/sass.dart' as sass;

void main(List<String> arguments) {
  var result = sass.compileToResult(arguments[0]);
  new File(arguments[1]).writeAsStringSync(result.css);
}
  1. Sie können dies jetzt verwenden, um Dateien zu kompilieren 
dart compile-sass.dart styles.scss styles.css

  1. Erfahren Sie mehr über das Schreiben von Dart-Code (es ist einfach!) und über die Sass API in Dart.

JavaScript-BibliothekJavaScript-Bibliothek Permalink

Dart Sass wird auch als reine JavaScript- sass-Paket und sass-embedded-Paket auf npm vertrieben. Die reine JS-Version ist langsamer als die eigenständige ausführbare Datei, aber sie lässt sich leicht in bestehende Workflows integrieren und ermöglicht es Ihnen, benutzerdefinierte Funktionen und Importer in JavaScript zu definieren. Sie können sie mit npm install --save-dev sass zu Ihrem Projekt hinzufügen und sie als Bibliothek einbinden

const sass = require('sass');

const result = sass.compile('style.scss');
console.log(result.css);

// OR

const result = await sass.compileAsync('style.scss');
console.log(result.css);

Wenn es über npm installiert wird, unterstützt Dart Sass eine brandneue JavaScript API sowie eine Legacy-API, die vollständig mit der alten Node Sass API kompatibel ist. Beachten Sie, dass bei Verwendung des sass-Pakets die synchronen API-Funktionen aufgrund des Overheads von asynchronen Rückrufen mehr als doppelt so schnell sind wie die asynchrone API.

Eingebettetes Dart SassEingebettetes Dart Sass  Permalink

Dart Sass unterstützt auch das Embedded Sass-Protokoll, das es jeder Programmiersprache ermöglicht, direkt mit der Dart VM zu kommunizieren, um Sass-Kompilierung auszuführen, einschließlich Unterstützung für benutzerdefinierte Funktionen und Importer. Dies hat zwei Hauptvorteile 

  1. Es erleichtert die Erstellung einer Wrapper-Bibliothek für Dart Sass für jede Programmiersprache, die einen Subprozess ausführen kann .

  2. Die Dart VM ist sehr schnell, daher bietet dies einen erheblichen Leistungsschub, selbst für JavaScript, bei dem das native sass-Paket verfügbar ist .

Die folgenden Embedded Sass-Wrapper-Pakete sind verfügbar. Wenn Sie noch eines hinzufügen möchten, senden Sie bitte eine Pull-Anfrage !