LegacyFileOptions<sync>

Kompatibilität (SASS_PATH)

Dart Sass

seit 1.15.0

Node Sass

since 3.9.0

➤

Diese Array von Strings-Option bietet Load Paths, nach denen Sass nach Stylesheets suchen soll. Frühere Load Paths haben Vorrang vor späteren Load Paths.

sass.renderSync({
  file: "style.scss",
  includePaths: ["node_modules/bootstrap/dist/css"]
});
Copy

Load Paths werden auch aus der Umgebungsvariable SASS_PATH geladen, falls diese gesetzt ist. Diese Variable sollte eine durch ; (unter Windows) oder : (auf anderen Betriebssystemen) getrennte Liste von Pfaden sein. Load Paths aus der Option includePaths haben Vorrang vor Load Paths aus SASS_PATH.

$ SASS_PATH=node_modules/bootstrap/dist/css sass style.scss style.css
Copy

Kompatibilität

Dart Sass

since 1.39.0

Node Sass

✗

Standardmäßig fügt Sass, wenn das CSS-Dokument Nicht-ASCII-Zeichen enthält, eine @charset-Deklaration (im expandierten Ausgabeformat) oder eine Byte Order Mark (im komprimierten Format) hinzu, um seine Kodierung für Browser oder andere Konsumenten anzuzeigen. Wenn charset false ist, werden diese Annotationen weggelassen.

Kompatibilität

Dart Sass

✓

Node Sass

since 3.0.0

Ob das generierte CSS Leerzeichen oder Tabs für die Einrückung verwenden soll.

const result = sass.renderSync({
  file: "style.scss",
  indentType: "tab",
  indentWidth: 1
});

result.css.toString();
// "h1 {\n\tfont-size: 40px;\n}\n"
Copy

Default Value

'space'

Kompatibilität

Dart Sass

✓

Node Sass

since 3.0.0

Wie viele Leerzeichen oder Tabs (abhängig von indentType) pro Einrückungsebene im generierten CSS verwendet werden sollen. Muss zwischen 0 und 10 (einschließlich) liegen.

Default Value

2

Kompatibilität

Dart Sass

✓

Node Sass

since 3.0.0

Welche Zeichenfolge am Ende jeder Zeile im generierten CSS verwendet werden soll. Es kann die folgenden Werte haben

• 'lf' verwendet U+000A LINE FEED.
• 'lfcr' verwendet U+000A LINE FEED gefolgt von U+000D CARRIAGE RETURN.
• 'cr' verwendet U+000D CARRIAGE RETURN.
• 'crlf' verwendet U+000D CARRIAGE RETURN gefolgt von U+000A LINE FEED.

Default Value

'lf'

Der Ausgabestil des kompilierten CSS. Es gibt vier mögliche Ausgabe stile

• "expanded" (der Standard für Dart Sass) schreibt jeden Selektor und jede Deklaration in eine eigene Zeile.

• "compressed" entfernt so viele zusätzliche Zeichen wie möglich und schreibt das gesamte Stylesheet in eine einzige Zeile.

• "nested" (Standard für Node Sass, wird von Dart Sass nicht unterstützt) rückt CSS-Regeln ein, um die Verschachtelung der Sass- Quelldatei abzugleichen.

• "compact" (wird von Dart Sass nicht unterstützt) platziert jede CSS-Regel auf einer einzelnen Zeile.

Beispiel

const source = `
h1 {
  font-size: 40px;
  code {
    font-face: Roboto Mono;
  }
}`;

let result = sass.renderSync({
  data: source,
  outputStyle: "expanded"
});
console.log(result.css.toString());
// h1 {
//   font-size: 40px;
// }
// h1 code {
//   font-face: Roboto Mono;
// }

result = sass.renderSync({
  data: source,
  outputStyle: "compressed"
});
console.log(result.css.toString());
// h1{font-size:40px}h1 code{font-face:Roboto Mono}

result = sass.renderSync({
  data: source,
  outputStyle: "nested"
});
console.log(result.css.toString());
// h1 {
//   font-size: 40px; }
//   h1 code {
//     font-face: Roboto Mono; }

result = sass.renderSync({
  data: source,
  outputStyle: "compact"
});
console.log(result.css.toString());
// h1 { font-size: 40px; }
// h1 code { font-face: Roboto Mono; }
Copy

Zusätzliche integrierte Sass-Funktionen, die in allen Stylesheets verfügbar sind. Diese Option nimmt ein Objekt entgegen, dessen Schlüssel Sass-Funktionssignaturen sind und dessen Werte LegacyFunctionen sind. Jede Funktion sollte dieselben Argumente wie ihre Signatur erhalten.

Funktionen erhalten Unterklassen von LegacyValue und müssen dieselben zurückgeben .

Beispiel

sass.render({
  data: `
h1 {
  font-size: pow(2, 5) * 1px;
}`,
  functions: {
    // This function uses the synchronous API, and can be passed to either
    // renderSync() or render().
    'pow($base, $exponent)': function(base, exponent) {
      if (!(base instanceof sass.types.Number)) {
        throw "$base: Expected a number.";
      } else if (base.getUnit()) {
        throw "$base: Expected a unitless number.";
      }

      if (!(exponent instanceof sass.types.Number)) {
        throw "$exponent: Expected a number.";
      } else if (exponent.getUnit()) {
        throw "$exponent: Expected a unitless number.";
      }

      return new sass.types.Number(
          Math.pow(base.getValue(), exponent.getValue()));
    },

    // This function uses the asynchronous API, and can only be passed to
    // render().
    'sqrt($number)': function(number, done) {
      if (!(number instanceof sass.types.Number)) {
        throw "$number: Expected a number.";
      } else if (number.getUnit()) {
        throw "$number: Expected a unitless number.";
      }

      done(new sass.types.Number(Math.sqrt(number.getValue())));
    }
  }
}, function(err, result) {
  console.log(result.css.toString());
  // h1 {
  //   font-size: 32px;
  // }
});
Copy

Kompatibilität

Dart Sass

✓

Node Sass

since 3.0.0

➤

Kompatibilität (Importreihenfolge)

Dart Sass

since 1.20.2

Node Sass

✗

➤

Zusätzliche Handler zum Laden von Dateien, wenn eine @use-Regel oder eine @import-Regel gefunden wird. Es kann sich entweder um eine einzelne LegacyImporter-Funktion oder ein Array von LegacyImporters handeln.

Importeure erhalten die URL der @import- oder @use-Regel und geben ein LegacyImporterResult zurück, das angibt, wie diese Regel zu behandeln ist. Weitere Details finden Sie unter LegacySyncImporter und LegacyAsyncImporter.

Ladungen werden gelöst, indem in Reihenfolge

• Laden einer Datei von der Festplatte relativ zur Datei, in der der @use- oder @import-Befehl erschien.

• Jeder benutzerdefinierte Importeur.

• Laden einer Datei relativ zum aktuellen Arbeitsverzeichnis .

• Jeder Load Path in includePaths.

• Jeder Load Path, der in der Umgebungsvariable SASS_PATH angegeben ist, welche unter Windows durch Semikolons und anderswo

Beispiel

sass.render({
  file: "style.scss",
  importer: [
    // This importer uses the synchronous API, and can be passed to either
    // renderSync() or render().
    function(url, prev) {
      // This generates a stylesheet from scratch for `@use "big-headers"`.
      if (url != "big-headers") return null;

      return {
        contents: `
h1 {
  font-size: 40px;
}`
      };
    },

    // This importer uses the asynchronous API, and can only be passed to
    // render().
    function(url, prev, done) {
      // Convert `@use "foo/bar"` to "node_modules/foo/sass/bar".
      const components = url.split('/');
      const innerPath = components.slice(1).join('/');
      done({
        file: `node_modules/${components.first}/sass/${innerPath}`
      });
    }
  ]
}, function(err, result) {
  // ...
});
Copy

Kompatibilität

Dart Sass

since 2.0

Node Sass

✗

Wenn diese Option auf eine Instanz von NodePackageImporter gesetzt ist, verwendet Sass den integrierten Node.js-Paketimporteur, um Sass-Dateien mit dem pkg: URL-Schema aufzulösen. Details für Library-Autoren und Benutzer finden Sie in der Dokumentation von NodePackageImporter .

Beispiel

sass.renderSync({
  data: '@use "pkg:vuetify";',
  pkgImporter: new sass.NodePackageImporter()
});
Copy

Eine Menge von Deprecations, die als fatal

Wenn während der Kompilierung eine Deprecationswarnung eines der bereitgestellten Typen auftritt, wird der Compiler stattdessen einen Fehler ausgeben.

Wenn eine Version angegeben ist, werden alle Deprecations, die in dieser Compilerversion aktiv waren, als fatal

Kompatibilität

dart: "1.78.0", node: false

Eine Menge von zukünftigen Deprecations, um sich frühzeitig dafür zu entscheiden.

Zukünftige Deprecations, die hier übergeben werden, werden vom Compiler als aktiv behandelt und bei Bedarf Warnungen ausgegeben .

Kompatibilität

dart: "1.78.0", node: false

Kompatibilität

Dart Sass

since 1.43.0

Node Sass

✗

Ein Objekt, das verwendet wird, um Warnungen und/oder Debug-Meldungen von Sass

Standardmäßig gibt Sass Warnungen und Debug-Meldungen an Standardfehler aus, aber wenn warn oder debug gesetzt ist, werden diese stattdessen aufgerufen.

Der spezielle Wert silent kann verwendet werden, um alle Meldungen

Kompatibilität

Dart Sass

since 1.35.0

Node Sass

✗

Wenn diese Option auf true gesetzt ist, gibt Sass keine Warnungen aus, die durch Abhängigkeiten verursacht werden. Eine "Abhängigkeit" ist definiert als jede Datei, die über includePaths oder importer geladen wird. Stylesheets, die relativ zum Einstiegspunkt importiert werden, gelten nicht als Abhängigkeiten.

Dies ist nützlich, um Deprecationswarnungen zu unterdrücken, die Sie nicht selbst beheben können. Bitte benachrichtigen Sie aber *auch* Ihre Abhängigkeiten über die Deprecations, damit diese so schnell wie möglich behoben werden!

Default Value

false

Eine Menge von aktiven Deprecations, die ignoriert

Wenn während der Kompilierung eine Deprecationswarnung eines der bereitgestellten Typen auftritt, wird der Compiler sie stattdessen ignorieren .

Kompatibilität

dart: "1.78.0", node: false

Kompatibilität

Dart Sass

since 1.35.0

Node Sass

✗

Standardmäßig gibt Dart Sass nur fünf Instanzen derselben Deprecation-Warnung pro Kompilierung aus, um die Benutzer nicht mit Konsolenlärm zu überfluten. Wenn Sie verbose auf true setzen, gibt es stattdessen jede Deprecation-Warnung aus, die es findet.

Default Value

false

Wenn true, fügt Sass keinen Link von der generierten CSS zur Source Map hinzu.

const result = sass.renderSync({
  file: "style.scss",
  sourceMap: "out.map",
  omitSourceMapUrl: true
})
console.log(result.css.toString());
// h1 {
//   font-size: 40px;
// }
Copy

Default Value

false

Der Speicherort, an dem Sass die generierte CSS erwartet. Er wird verwendet, um die URL zu bestimmen, die zum Verknüpfen von der generierten CSS zur Source Map und von der Source Map zu den Sass-Quelldateien verwendet wird .

result = sass.renderSync({
  file: "style.scss",
  sourceMap: true,
  outFile: "out.css"
})
console.log(result.css.toString());
// h1 {
//   font-size: 40px;
// }
// /*# sourceMappingURL=out.css.map * /
Copy

Ob Sass eine Source Map generieren soll oder nicht. Wenn ja, ist die Source Map verfügbar als map (es sei denn, sourceMapEmbed ist true).

Wenn diese Option eine Zeichenkette ist, ist dies der Pfad, unter dem die Source Map erwartet wird, was verwendet wird, um die Source Map von der generierten CSS und von der Source Map zu den Sass-Quelldateien zu verknüpfen. Beachten Sie, dass Sass davon ausgeht, dass die CSS im selben Verzeichnis wie die file-Option gespeichert wird, wenn sourceMap eine Zeichenkette ist und outFile nicht übergeben wird .

Wenn diese Option true ist, wird angenommen, dass der Pfad outFile mit angehängtem .map ist. Wenn sie true ist und outFile nicht übergeben wird, hat sie keine Auswirkung .

Beispiel

let result = sass.renderSync({
  file: "style.scss",
  sourceMap: "out.map"
})
console.log(result.css.toString());
// h1 {
//   font-size: 40px;
// }
// /*# sourceMappingURL=out.map * /

result = sass.renderSync({
  file: "style.scss",
  sourceMap: true,
  outFile: "out.css"
})
console.log(result.css.toString());
// h1 {
//   font-size: 40px;
// }
// /*# sourceMappingURL=out.css.map * /
Copy

Default Value

false

Ob der gesamte Inhalt der Sass-Dateien, die zur generierten CSS beigetragen haben, in die Source Map eingebettet werden soll. 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 die CSS ausgeliefert wird .

Beispiel

sass.renderSync({
  file: "style.scss",
  sourceMap: "out.map",
  sourceMapContents: true
})
Copy

Default Value

false

Ob der Inhalt der Source Map-Datei in die generierte CSS eingebettet werden soll, anstatt eine separate Datei zu erstellen und von der CSS darauf zu verweisen .

Beispiel

sass.renderSync({
  file: "style.scss",
  sourceMap: "out.map",
  sourceMapEmbed: true
});
Copy

Default Value

false

Wenn dies übergeben wird, wird es allen Links von der Source Map zu den Sass-Quelldateien vorangestellt .