LegacyStringOptions<sync>

Wenn data übergeben wird, verwendet Sass dies als Inhalt der zu kompilierenden Stylesheet-Datei. 

Veraltet

Dies funktioniert nur mit den Legacy-APIs render und renderSync. Verwenden Sie stattdessen StringOptions mit compile, compileString, compileAsync und compileStringAsync. 

Typenparameter

Hierarchie

Input

data file? includePaths? indentedSyntax?

Output

charset? indentType? indentWidth? linefeed? outputStyle?

Plugins

functions? importer? pkgImporter?

Messages

fatalDeprecations? futureDeprecations? logger? quietDeps? silenceDeprecations? verbose?

Source Maps

omitSourceMapUrl? outFile? sourceMap? sourceMapContents? sourceMapEmbed? sourceMapRoot?

Input

data

data: string

Der Inhalt des zu kompilierenden Stylesheets. Sofern nicht auch file übergeben wird, wird die URL des Stylesheets auf "stdin" gesetzt.

Standardmäßig wird dieses Stylesheet als SCSS geparst. Dies kann über indentedSyntax gesteuert werden.

Beispiel

sass.renderSync({
  data: `
h1 {
  font-size: 40px;
}`
});

Optional file

file?: string

Wenn sowohl file als auch data übergeben werden, wird file als Pfad des Stylesheets für die Fehlerberichterstattung verwendet, aber data wird als Inhalt des Stylesheets verwendet. In diesem Fall wird die Erweiterung von file nicht verwendet, um die Syntax des Stylesheets zu bestimmen.

Optional includePaths

includePaths?: string[]
Kompatibilität (SASS_PATH)
Dart Sass
since 1.15.0
Node Sass
since 3.9.0

Frühere Versionen von Dart Sass und Node Sass unterstützten die Umgebungsvariable SASS_PATH nicht.

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"]
});

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

Optional indentedSyntax

indentedSyntax?: boolean

Dieses Flag steuert, ob data als eingerückte Syntax geparst wird oder nicht.

Beispiel

sass.renderSync({
  data: `
h1
  font-size: 40px`,
  indentedSyntax: true
});

Default Value

false

Output

Optional charset

charset?: boolean
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.

Optional indentType

indentType?: "space" | "tab"
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"

Default Value

'space'

Optional indentWidth

indentWidth?: number
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

Optional linefeed

linefeed?: "cr" | "crlf" | "lf" | "lfcr"
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'

Optional outputStyle

outputStyle?: "expanded" | "compact" | "compressed" | "nested"

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; }

Plugins

Optional functions

functions?: {
    [key: string]: LegacyFunction<sync>;
}

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 .

⚠️ Vorsicht!

Beim Schreiben benutzerdefinierter Funktionen ist es wichtig sicherzustellen, dass alle Argumente die erwarteten Typen haben. Andernfalls könnten die Stylesheets der Benutzer auf schwer zu debuggende Weise abstürzen oder, schlimmer noch, zu bedeutungslosen CSS-Dateien kompiliert werden.

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;
  // }
});

Typdeklaration

Optional importer

importer?: LegacyImporter<sync> | LegacyImporter<sync>[]
Kompatibilität
Dart Sass
✓
Node Sass
since 3.0.0

Versionen von Node Sass vor 3.0.0 unterstützen keine Importeur-Arrays und auch keine Importeure, die Error-Objekte zurückgeben.

Versionen von Node Sass vor 2.0.0 unterstützen die Option importer überhaupt nicht.

Kompatibilität (Importreihenfolge)
Dart Sass
since 1.20.2
Node Sass
✗

Versionen von Dart Sass vor 1.20.2 bevorzugten die Auflösung von Imports mit includePaths, bevor sie mit benutzerdefinierten Importeuren aufgelöst wurden.

Alle Versionen von Node Sass übergeben Imports derzeit an Importeure, bevor sie relativ zur Datei geladen werden, in der die @import-Anweisung vorkommt. Dieses Verhalten wird als falsch angesehen und sollte nicht als Grundlage verwendet werden, da es das Prinzip der *Lokalität* verletzt, das besagt, dass es möglich sein sollte, eine Stylesheet-Datei zu analysieren, ohne alles über die Konfiguration des gesamten Systems zu wissen. Wenn ein Benutzer versucht, eine Stylesheet-Datei relativ zu einer anderen Stylesheet-Datei zu importieren, sollte dieser Import *immer* funktionieren. Es sollte nicht möglich sein, dass eine Konfiguration irgendwo anders dies bricht.

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) {
  // ...
});

Optional pkgImporter

pkgImporter?: NodePackageImporter
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()
});

Messages

Optional fatalDeprecations

fatalDeprecations?: (DeprecationOrId | Version)[]

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

Optional futureDeprecations

futureDeprecations?: DeprecationOrId[]

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

Optional logger

logger?: Logger
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

Optional quietDeps

quietDeps?: boolean
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!

⚠️ Vorsicht!

Wenn render oder renderSync ohne file oder file aufgerufen wird, werden *alle* von ihr geladenen Stylesheets als Abhängigkeiten betrachtet. Da sie keinen eigenen Pfad hat, stammt alles, was sie lädt, von einem Load Path und nicht von einem relativen Import.

Default Value

false

Optional silenceDeprecations

silenceDeprecations?: DeprecationOrId[]

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 .

⚠️ Vorsicht!

Die veraltete Funktionalität, von der Sie abhängig sind, wird irgendwann brechen.

Kompatibilität

dart: "1.78.0", node: false

Optional verbose

verbose?: boolean
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

Source Maps

Optional omitSourceMapUrl

omitSourceMapUrl?: boolean

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;
// }

Default Value

false

Optional outFile

outFile?: string

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 .

⚠️ Vorsicht!

Trotz des Namens schreibt Sass die CSS-Ausgabe nicht in diese Datei. Der Aufrufer muss dies selbst tun .

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

Optional sourceMap

sourceMap?: string | boolean

Ob Sass eine Source Map generieren soll oder nicht. Wenn ja, ist die Source Map als map verfügbar (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 * /

Default Value

false

Optional sourceMapContents

sourceMapContents?: boolean

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
})

Default Value

false

Optional sourceMapEmbed

sourceMapEmbed?: boolean

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
});

Default Value

false

Optional sourceMapRoot

sourceMapRoot?: string

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