Dart Sass Kommandozeilen- Interface

VerwendungPermalien für Verwendung

Die Dart Sass ausführbare Datei kann in einem von zwei Modi aufgerufen werden.

Eins-zu-Eins-ModusPermalien für Eins-zu-Eins-Modus

sass <input.scss> [output.css]

Der Eins-zu-Eins-Modus kompiliert eine einzelne Eingabedatei (input.scss) an einen einzelnen Ausgabeort (output.css). Wenn kein Ausgabeort angegeben wird, wird das kompilierte CSS im Terminal ausgegeben.

Die Eingabedatei wird als SCSS geparst, wenn ihre Erweiterung .scss ist, als die eingezogene Syntax, wenn ihre Erweiterung .sass ist, oder als einfaches CSS, wenn ihre Erweiterung .css ist. Wenn sie keine dieser drei Erweiterungen hat oder aus der Standardeingabe stammt, wird sie standardmäßig als SCSS geparst. Dies kann mit der Option --indented gesteuert werden.

Die Sonderzeichenkette - kann anstelle der Eingabedatei übergeben werden, um Sass anzuweisen, die Eingabedatei von den Standardeingaben zu lesen. Sass wird standardmäßig als SCSS parsen, es sei denn, die Option --indented wird übergeben.

Viele-zu-Viele-ModusPermalien für Viele-zu-Viele-Modus

Kompatibilität
Dart Sass
seit 1.4.0
sass [<input.scss>:<output.css>] [<input/>:<output/>]...

Der Viele-zu-Viele-Modus kompiliert eine oder mehrere Eingabedateien zu einer oder mehreren Ausgabedateien. Die Eingaben werden mit Doppelpunkten von den Ausgaben getrennt. Er kann auch alle Sass-Dateien in einem Verzeichnis in CSS-Dateien mit denselben Namen in einem anderen Verzeichnis kompilieren.

​# Compiles style.scss to style.css.
$ sass style.scss:style.css

​# Compiles light.scss and dark.scss to light.css and dark.css.
$ sass light.scss:light.css dark.scss:dark.css

​# Compiles all Sass files in themes/ to CSS files in public/css/.
$ sass themes:public/css

Beim Kompilieren ganzer Verzeichnisse ignoriert Sass Teildateien, deren Namen mit _ beginnen. Sie können Teildateien verwenden, um Ihre Stylesheets zu trennen, ohne unnötige Ausgabedateien zu erstellen.

OptionenPermalien für Optionen

Ein- und AusgabePermalien für Ein- und Ausgabe 

Diese Optionen steuern, wie Sass seine Eingabedateien lädt und wie es Ausgabedateien erzeugt.

--stdinPermalien für –stdin

Diese Option ist eine alternative Möglichkeit, Sass mitzuteilen, dass es seine Eingabedatei von den Standardeingaben lesen soll. Wenn sie übergeben wird, darf keine Eingabedatei übergeben werden.

$ echo "h1 {font-size: 40px}" | sass --stdin h1.css
$ echo "h1 {font-size: 40px}" | sass --stdin
h1 {
  font-size: 40px;
}

Die Option --stdin darf nicht im Viele-zu-Viele-Modus verwendet werden.

--indentedPermalien für –indented

Diese Option weist Sass an, die Eingabedatei als eingezogene Syntax zu parsen. Wenn sie im Viele-zu-Viele-Modus verwendet wird, werden alle Eingabedateien als eingezogene Syntax geparst, obwohl die Syntax von Dateien, die sie verwenden, wie gewohnt bestimmt wird. Das Gegenteil, --no-indented, kann verwendet werden, um alle Eingabedateien stattdessen als SCSS zu parsen zu zwingen.

Die Option --indented ist hauptsächlich nützlich, wenn die Eingabedatei von den Standardeingaben stammt, sodass ihre Syntax nicht automatisch bestimmt werden kann.

$ echo -e 'h1\n  font-size: 40px' | sass --indented -
h1 {
  font-size: 40px;
}

--load-pathPermalien für –load-path

Diese Option (abgekürzt -I) fügt einen zusätzlichen Suchpfad hinzu, in dem Sass Stylesheets suchen soll. Sie kann mehrmals übergeben werden, um mehrere Suchpfade anzugeben. Frühere Suchpfade haben Vorrang vor späteren.

$ sass --load-path=node_modules/bootstrap/dist/css style.scss style.css

--pkg-importer=nodePermalien für –pkg-importer=node

Kompatibilität
Dart Sass
seit 1.71.0

Diese Option (abgekürzt -p node) fügt den Node.js pkg:-Importer am Ende des Suchpfads hinzu, sodass Stylesheets Abhängigkeiten über den Node.js-Modulauflösungsalgorithmus laden können.

Die Unterstützung für zusätzliche integrierte pkg:-Importer kann in Zukunft hinzugefügt werden.

$ sass --pkg-importer=node style.scss style.css

--stylePermalien für –style

Diese Option (abgekürzt -s) steuert den Ausgabestil des resultierenden CSS. Dart Sass unterstützt zwei Ausgabestile.

  • expanded (Standard) schreibt jeden Selektor und jede Deklaration auf eine eigene Zeile.
  • compressed entfernt so viele zusätzliche Zeichen wie möglich und schreibt das gesamte Stylesheet in eine einzige Zeile.
$ sass --style=expanded style.scss
h1 {
  font-size: 40px;
}

$ sass --style=compressed style.scss
h1{font-size:40px}

--no-charsetPermalien für –no-charset

Kompatibilität
Dart Sass
seit 1.19.0

Diese Option weist Sass an, niemals eine @charset-Deklaration oder ein UTF-8 Byte Order Mark auszugeben. Standardmäßig oder wenn --charset übergeben wird, fügt Sass entweder eine @charset-Deklaration (im erweiterten Ausgabemodus) oder ein Byte Order Mark (im komprimierten Ausgabemodus) ein, wenn das Stylesheet Nicht-ASCII-Zeichen enthält .

$ echo 'h1::before {content: "👭"}' | sass --no-charset
h1::before {
  content: "👭";
}

$ echo 'h1::before {content: "👭"}' | sass --charset
@charset "UTF-8";
h1::before {
  content: "👭";
}

--error-cssPermalien für –error-css

Kompatibilität
Dart Sass
seit 1.20.0

Diese Option weist Sass an, ob eine CSS-Datei ausgegeben werden soll, wenn während der Kompilierung ein Fehler auftritt. Diese CSS-Datei beschreibt den Fehler in einem Kommentar und in der content-Eigenschaft von body::before, sodass Sie die Fehlermeldung im Browser sehen können, ohne zum Terminal wechseln zu müssen.

Standardmäßig ist die Fehler-CSS aktiviert, wenn Sie in mindestens eine Datei auf der Festplatte kompilieren (im Gegensatz zur Standardausgabe). Sie können --error-css explizit übergeben, um sie auch dann zu aktivieren, wenn Sie in die Standardausgabe kompilieren, oder --no-error-css, um sie überall zu deaktivieren. Wenn sie deaktiviert ist, löschen die Optionen --update und --watch stattdessen CSS-Dateien, wenn ein Fehler auftritt.

$ sass --error-css style.scss style.css
/* Error: Incompatible units em and px.
 *   ,
 * 1 | $width: 15px + 2em;
 *   |         ^^^^^^^^^^
 *   '
 *   test.scss 1:9  root stylesheet */

body::before {
  font-family: "Source Code Pro", "SF Mono", Monaco, Inconsolata, "Fira Mono",
      "Droid Sans Mono", monospace, monospace;
  white-space: pre;
  display: block;
  padding: 1em;
  margin-bottom: 1em;
  border-bottom: 2px solid black;
  content: "Error: Incompatible units em and px.\a   \2577 \a 1 \2502  $width: 15px + 2em;\a   \2502          ^^^^^^^^^^\a   \2575 \a   test.scss 1:9  root stylesheet";
}
Error: Incompatible units em and px.
  ╷
1 │ $width: 15px + 2em;
  │         ^^^^^^^^^^
  ╵
  test.scss 1:9  root stylesheet

--updatePermalien für –update

Kompatibilität
Dart Sass
seit 1.4.0

Wenn die Option --update übergeben wird, kompiliert Sass nur Stylesheets, deren Abhängigkeiten neuer als die entsprechende CSS-Datei generiert wurden, geändert wurden. Es werden auch Statusmeldungen beim Aktualisieren von Stylesheets ausgegeben.

$ sass --update themes:public/css
Compiled themes/light.scss to public/css/light.css.

Source MapsPermalien für Source Maps

Kompatibilität
Dart Sass
seit 1.3.0

Source Maps sind Dateien, die Browsern oder anderen Werkzeugen, die CSS verbrauchen, mitteilen, wie dieses CSS mit den Sass-Dateien korrespondiert, aus denen es generiert wurde. Sie ermöglichen es, Ihre Sass-Dateien in Browsern zu sehen und sogar zu bearbeiten. Sehen Sie Anleitungen zur Verwendung von Source Maps in Chrome und Firefox.

Dart Sass generiert standardmäßig Source Maps für jede CSS-Datei, die es ausgibt.

--no-source-mapPermalien für –no-source-map

Wenn die Option --no-source-map übergeben wird, generiert Sass keine Source Maps. Sie kann nicht zusammen mit anderen Source Map- Optionen übergeben werden.

$ sass --no-source-map style.scss style.css

--source-map-urlsPermalien für –source-map-urls

Diese Option steuert, wie die von Sass generierten Source Maps auf die Sass-Dateien verlinken, die zur generierten CSS beigetragen haben. Dart Sass unterstützt zwei Arten von URLs:

  • relative (Standard) verwendet relative URLs vom Speicherort der Source-Map-Datei zu den Speicherorten der Sass-Quelldatei.
  • absolute verwendet die absoluten file: URLs der Sass-Quelldateien. Beachten Sie, dass absolute URLs nur auf demselben Computer funktionieren, auf dem das CSS kompiliert wurde.
​# Generates a URL like "../sass/style.scss".
$ sass --source-map-urls=relative sass/style.scss css/style.css

​# Generates a URL like "file:///home/style-wiz/sassy-app/sass/style.scss".
$ sass --source-map-urls=absolute sass/style.scss css/style.css

--embed-sourcesPermalien für –embed-sources

Diese Option weist Sass an, den gesamten Inhalt der Sass-Dateien, die zur generierten CSS beigetragen haben, in die Source Map einzubetten. Dies kann zu sehr großen Source Maps führen, garantiert aber, dass die Quelle auf jedem Computer verfügbar ist, unabhängig davon, wie das CSS bereitgestellt wird.

$ sass --embed-sources sass/style.scss css.style.css

--embed-source-mapPermalien für –embed-source-map

Diese Option weist Sass an, den Inhalt der Source-Map-Datei in das generierte CSS einzubetten, anstatt eine separate Datei zu erstellen und von ihr aus dem CSS zu verlinken.

$ sass --embed-source-map sass/style.scss css.style.css

Weitere OptionenPermalien für Weitere Optionen

--watchPermalien für –watch

Kompatibilität
Dart Sass
seit 1.6.0

Diese Option (abgekürzt -w) verhält sich wie die Option --update, aber nachdem die erste Kompilierung abgeschlossen ist, bleibt Sass geöffnet und kompiliert weiterhin Stylesheets, wenn sie oder ihre Abhängigkeiten sich ändern.

Sass beobachtet nur die Verzeichnisse, die Sie als solche auf der Befehlszeile übergeben, die übergeordneten Verzeichnisse von Dateinamen, die Sie auf der Befehlszeile übergeben, und die Suchpfade. Es beobachtet keine zusätzlichen Verzeichnisse basierend auf den @import/@use/ @forward-Regeln einer Datei.

$ sass --watch themes:public/css
Compiled themes/light.scss to public/css/light.css.

​# Then when you edit themes/dark.scss...
Compiled themes/dark.scss to public/css/dark.css.

--pollPermalien für –poll

Kompatibilität
Dart Sass
seit 1.8.0

Diese Option, die nur zusammen mit --watch übergeben werden kann, weist Sass an, Änderungen an den Quelldateien regelmäßig manuell zu überprüfen, anstatt sich darauf zu verlassen, dass das Betriebssystem benachrichtigt, wenn etwas geändert wurde. Dies kann erforderlich sein, wenn Sie Sass auf einem Remote-Laufwerk bearbeiten, auf dem das Benachrichtigungssystem des Betriebssystems nicht funktioniert.

$ sass --watch --poll themes:public/css
Compiled themes/light.scss to public/css/light.css.

​# Then when you edit themes/dark.scss...
Compiled themes/dark.scss to public/css/dark.css.

--stop-on-errorPermalien für –stop-on-error

Kompatibilität
Dart Sass
seit 1.8.0

Diese Option weist Sass an, die Kompilierung sofort zu beenden, wenn ein Fehler erkannt wird, anstatt zu versuchen, andere Sass-Dateien zu kompilieren, die möglicherweise keine Fehler enthalten. Sie ist hauptsächlich im Viele-zu-Viele-Modus nützlich.

$ sass --stop-on-error themes:public/css
Error: Expected expression.
   ╷
42 │ h1 {font-face: }
   │                ^
   ╵
  themes/light.scss 42:16  root stylesheet

--interactivePermalien für –interactive

Kompatibilität
Dart Sass
seit 1.5.0

Diese Option (abgekürzt -i) weist Sass an, im interaktiven Modus ausgeführt zu werden, in dem Sie SassScript-Ausdrücke schreiben und ihre Ergebnisse sehen können. Der interaktive Modus unterstützt auch Variablen und @use-Regeln.

$ sass --interactive
>> 1px + 1in
97px
>> @use "sass:map"
>> $map: ("width": 100px, "height": 70px)
("width": 100px, "height": 70px)
>> map.get($map, "width")
100px

--colorPermalien für –color

Diese Option (abgekürzt -c) weist Sass an, Terminalfarben auszugeben, und die Umkehrung --no-color weist es an, keine Farben auszugeben. Standardmäßig gibt es Farben aus, wenn es den Anschein hat, dass es auf einem Terminal ausgeführt wird, das sie unterstützt.

$ sass --color style.scss style.css
Error: Incompatible units em and px.
  ╷
1 │ $width: 15px + 2em
  │         ^^^^^^^^^^
  ╵
  style.scss 1:9  root stylesheet

$ sass --no-color style.scss style.css
Error: Incompatible units em and px.
  ╷
1 │ $width: 15px + 2em
  │         ^^^^^^^^^^
  ╵
  style.scss 1:9  root stylesheet

--no-unicodePermalien für –no-unicode

Kompatibilität
Dart Sass
seit 1.17.0

Diese Option weist Sass an, im Rahmen von Fehlermeldungen nur ASCII-Zeichen an das Terminal auszugeben. Standardmäßig oder wenn --unicode übergeben wird, gibt Sass Nicht-ASCII-Zeichen für diese Meldungen aus. Diese Option hat keine Auswirkungen auf die CSS- Ausgabe.

$ sass --no-unicode style.scss style.css
Error: Incompatible units em and px.
  ,
1 | $width: 15px + 2em;
  |         ^^^^^^^^^^
  '
  test.scss 1:9  root stylesheet

$ sass --unicode style.scss style.css
Error: Incompatible units em and px.
  ╷
1 │ $width: 15px + 2em;
  │         ^^^^^^^^^^
  ╵
  test.scss 1:9  root stylesheet

--verbosePermalien für –verbose

Diese Option weist Sass an, alle Deprecation-Warnungen während der Kompilierung auszugeben. Standardmäßig gibt Sass nur fünf Warnungen für einen bestimmten Deprecation-Typ aus, wenn veraltete Funktionen verwendet werden, und unterdrückt alle Warnungen darüber hinaus.

$ sass --verbose style.scss style.css

--quietPermalien für –quiet

Diese Option (abgekürzt -q) weist Sass an, keine Warnungen während der Kompilierung auszugeben. Standardmäßig gibt Sass Warnungen aus, wenn veraltete Funktionen verwendet werden oder wenn die Regel @warn angetroffen wird. Sie unterdrückt auch die Regel @debug.

$ sass --quiet style.scss style.css

--quiet-depsPermalien für –quiet-deps

Diese Option weist Sass an, keine Deprecation-Warnungen auszugeben, die von Abhängigkeiten stammen. Sie betrachtet jede Datei, die transitiv über einen Suchpfad importiert wird, als "Abhängigkeit". Diese Option hat keine Auswirkungen auf die Regel @warn oder die Regel @debug.

$ sass --load-path=node_modules --quiet-deps style.scss style.css

--fatal-deprecationPermalien für –fatal-deprecation

Kompatibilität
Dart Sass
seit 1.59.0

Diese Option weist Sass an, einen bestimmten Typ von Deprecation-Warnungen als Fehler zu behandeln. Zum Beispiel weist dieser Befehl Sass an, Deprecation-Warnungen für die Verwendung von / als Division als Fehler zu behandeln.

$ sass --fatal-deprecation=slash-div style.scss style.css
Error: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div(4, 2) or calc(4 / 2)

More info and automated migrator: /documentation/breaking-changes/slash-div

This is only an error because you've set the slash-div deprecation to be fatal.
Remove this setting if you need to keep using this feature.
  ╷
1 │ a { b: (4/2); }
  │         ^^^
  ╵
  style.scss 1:9  root stylesheet

Die folgenden Deprecation-IDs können dieser Option übergeben werden:

IDVeraltet inBeschreibung
call-string0.0.0Übergabe eines Strings direkt an meta.call().
elseif1.3.2@elseif.
moz-document1.7.2@-moz-document.
relative-canonical1.14.2Importe mit relativen kanonischen URLs.
new-global1.17.2Deklarieren neuer Variablen mit !global.
color-module-compat1.23.0Verwendung von Farbmodulfunktionen anstelle von einfachen CSS-Funktionen.
slash-div1.33.0Der Operator / für Division.
bogus-combinators1.54.0Führende, nachgestellte und wiederholte Kombinatoren.
strict-unary1.55.0Mehrdeutige Operatoren + und -.
function-units1.56.0Übergabe ungültiger Einheiten an integrierte Funktionen.
duplicate-var-flags1.62.0Verwendung von !default oder !global mehrmals für eine Variable.
null-alpha1.62.3Übergabe von null als Alpha in der JS-API.
abs-percent1.65.0Übergabe von Prozentwerten an die Sass-Funktion abs().
fs-importer-cwd1.73.0Verwendung des aktuellen Arbeitsverzeichnisses als impliziter Suchpfad.
css-function-mixin1.76.0Funktions- und Mixinnamen, die mit – beginnen.
mixed-decls1.77.7Deklarationen nach oder zwischen verschachtelten Regeln.
feature-exists1.78.0meta.feature-exists
color-4-api1.79.0Bestimmte Verwendungen von integrierten sass:color-Funktionen.
color-functions1.79.0Verwendung globaler Farb-Funktionen anstelle von sass:color.
legacy-js-api1.79.0Legacy JS-API.

Alternativ können Sie eine Dart Sass-Version übergeben, um alle Deprecation-Warnungen, die in dieser Version vorhanden waren, als Fehler zu behandeln. Zum Beispiel würde --fatal-deprecation=1.33.0 alle Deprecation-Warnungen in der obigen Tabelle bis einschließlich slash-div als Fehler behandeln, aber neuere Deprecation-Warnungen als Warnungen belassen.

--future-deprecationPermalien für –future-deprecation

Kompatibilität
Dart Sass
seit 1.59.0

Diese Option weist Sass an, sich frühzeitig für einen zukünftigen Deprecation-Warnungstyp zu entscheiden und Warnungen auszugeben, obwohl die Veraltung noch nicht aktiv ist. Diese Option kann mit --fatal-deprecation kombiniert werden, um anstelle von Warnungen Fehler für eine zukünftige Veraltung auszugeben.

$ sass --future-deprecation=import style.scss style.css
Deprecation Warning on line 1, column 9 of style.scss:
Sass @import rules will be deprecated in the future.
Remove the --future-deprecation=import flag to silence this warning for now.
  ╷
1 │ @import 'dependency';
  │         ^^^^^^^^^^^^
  ╵

Die folgenden Deprecation-IDs können dieser Option übergeben werden:

IDBeschreibung
import@import-Regeln.
global-builtinGlobale integrierte Funktionen, die in sass: Modulen verfügbar sind.

--silence-deprecationPermalien für –silence-deprecation

Kompatibilität
Dart Sass
seit 1.74.0

Diese Option weist Sass an, einen bestimmten Typ von Deprecation-Warnungen zu unterdrücken, wenn Sie die Veraltung vorübergehend ignorieren möchten. Alle im Abschnitt --fatal-deprecation oben aufgeführten Veraltungen können hier übergeben werden, wobei die Übergabe einer Version nicht unterstützt wird.

$ sass --silence-deprecation=slash-div style.scss style.css

--tracePermalien für –trace

Diese Option weist Sass an, den vollständigen Dart- oder JavaScript-Stacktrace auszugeben, wenn ein Fehler auftritt. Sie wird vom Sass-Team zum Debuggen von Fehlern verwendet.

$ sass --trace style.scss style.css
Error: Expected expression.
   ╷
42 │ h1 {font-face: }
   │                ^
   ╵
  themes/light.scss 42:16  root stylesheet

package:sass/src/visitor/evaluate.dart 1846:7                        _EvaluateVisitor._addExceptionSpan
package:sass/src/visitor/evaluate.dart 1128:12                       _EvaluateVisitor.visitBinaryOperationExpression
package:sass/src/ast/sass/expression/binary_operation.dart 39:15     BinaryOperationExpression.accept
package:sass/src/visitor/evaluate.dart 1097:25                       _EvaluateVisitor.visitVariableDeclaration
package:sass/src/ast/sass/statement/variable_declaration.dart 50:15  VariableDeclaration.accept
package:sass/src/visitor/evaluate.dart 335:13                        _EvaluateVisitor.visitStylesheet
package:sass/src/visitor/evaluate.dart 323:5                         _EvaluateVisitor.run
package:sass/src/visitor/evaluate.dart 81:10                         evaluate
package:sass/src/executable/compile_stylesheet.dart 59:9             compileStylesheet
package:sass/src/executable.dart 62:15                               main

--helpPermalien für –help

Diese Option (abgekürzt -h) gibt eine Zusammenfassung dieser Dokumentation aus.

$ sass --help
Compile Sass to CSS.

Usage: sass <input.scss> [output.css]
       sass <input.scss>:<output.css> <input/>:<output/>

...

--versionPermalien für –version

Diese Option gibt die aktuelle Version von Sass aus.

$ sass --version
1.79.4