Asynchronously compiles the Sass file at path to CSS. Returns a promise that resolves with a CompileResult if it succeeds and rejects with an Exception if it fails.
This only allows synchronous or asynchronous Importers and CustomFunctions.
When using Dart Sass, compile is almost twice as fast as compileAsync, due to the overhead of making the entire evaluation process asynchronous.
Synchronously compiles a stylesheet whose contents is source to CSS. If it succeeds it returns a CompileResult, and if it fails it throws an Exception.
This only allows synchronous Importers and CustomFunctions.
Asynchronously compiles a stylesheet whose contents is source to CSS. Returns a promise that resolves with a CompileResult if it succeeds and rejects with an Exception if it fails.
This only allows synchronous or asynchronous Importers and CustomFunctions.
When using Dart Sass, compile is almost twice as fast as compileAsync, due to the overhead of making the entire evaluation process asynchronous.
Possible output styles for the compiled CSS:
"expanded" (the default for Dart Sass) writes each selector and declaration on its own line.
"compressed" removes as many extra characters as possible, and writes the entire stylesheet on a single line.
Options that can be passed to compileString or compileStringAsync.
This is a StringOptionsWithImporter if it has a StringOptionsWithImporter.importer field, and a StringOptionsWithoutImporter otherwise.
This lets the TypeScript checker verify that asynchronous Importers, FileImporters, and CustomFunctions aren't passed to compile or compileString.
Syntaxes supported by Sass:
'scss' is the SCSS syntax.'indented' is the indented syntax
'css' is plain CSS, which is parsed like SCSS but forbids the use of any special Sass features.A CustomFunction<'sync'> must return synchronously, but in return it can be passed to compile and compileString in addition to compileAsync and compileStringAsync.
A CustomFunction<'async'> may either return synchronously or asynchronously, but it can only be used with compileAsync and compileStringAsync.
A callback that implements a custom Sass function. This can be passed to Options.functions.
constresult = sass.compile('style.scss', {
functions: {
"sum($arg1, $arg2)": (args) => {
constarg1 = args[0].assertNumber('arg1');
constvalue1 = arg1.value;
constvalue2 = args[1].assertNumber('arg2')
.convertValueToMatch(arg1, 'arg2', 'arg1');
returnnewsass.SassNumber(value1 + value2).coerceToMatch(arg1);
}
}
});
An array of arguments passed by the function's caller. If the function takes arbitrary arguments, the last element will be a SassArgumentList.
The function's result. This may be in the form of a Promise, but if it is the function may only be passed to compileAsync and compileStringAsync, not compile or compileString.
Possible separators used by Sass lists. The special separator null is only used for lists with fewer than two elements, and indicates that the separator has not yet been decided for this list.
Sass's false value.
Sass's null value.
Sass's true value.
A utility type for choosing between synchronous and asynchronous return values.
This is used as the return value for plugins like CustomFunction, Importer, and FileImporter so that TypeScript enforces that asynchronous plugins are only passed to compileAsync and compileStringAsync, not compile or compileString.
If this is 'sync', this can only be a T. If it's 'async', this can be either a T or a Promise<T>.
Information about the Sass implementation. This always begins with a unique identifier for the Sass implementation, followed by U+0009 TAB, followed by its npm package version. Some implementations include additional information as well, but not in any standardized format.
dart-sass.node-sass.sass-embedded.An asynchronous callback that implements a custom Sass function. This can be passed to LegacySharedOptions.functions, but only for render.
An asynchronous function must return undefined. Its final argument will always be a callback, which it should call with the result of the function once it's done running.
If this throws an error, Sass will treat that as the function failing with that error message.
sass.render({
file:'style.scss',
functions: {
"sum($arg1, $arg2)": (arg1, arg2, done) => {
if (!(arg1instanceofsass.types.Number)) {
thrownewError("$arg1: Expected a number");
} elseif (!(arg2instanceofsass.types.Number)) {
thrownewError("$arg2: Expected a number");
}
done(newsass.types.Number(arg1.getValue() + arg2.getValue()));
}
}
}, (result, error) => {
// ...
});
This is passed one argument for each argument that's declared in the signature that's passed to LegacySharedOptions.functions. If the signature takes arbitrary arguments, they're passed as a single argument list in the last argument before the callback.
The function called by a LegacyAsyncFunction to indicate that it's finished.
If this is a LegacyValue, that indicates that the function call completed successfully. If it's a types.Error, that indicates that the function call failed.
An asynchronous callback that implements custom Sass loading logic for @import rules and @use rules. This can be passed to LegacySharedOptions.importer for either render or renderSync.
An asynchronous importer must return undefined, and then call done with the result of its LegacyImporterResult once it's done running.
See LegacySharedOptions.importer for more detailed documentation.
sass.render({
file:"style.scss",
importer: [
function(url, prev, done) {
if (url != "big-headers") done(null);
done({
contents:'h1 { font-size: 40px; }'
});
}
]
});
The @use or @import rule’s URL as a string, exactly as it appears in the stylesheet.
A string identifying the stylesheet that contained the @use or @import. This string’s format depends on how that stylesheet was loaded:
@use or @import rule that loaded it.The callback to call once the importer has finished running.
A callback that implements a custom Sass function. For renderSync, this must be a LegacySyncFunction which returns its result directly; for render, it may be either a LegacySyncFunction or a LegacyAsyncFunction which calls a callback with its result.
See LegacySharedOptions.functions for more details.
A callback that implements custom Sass loading logic for @import rules and @use rules. For renderSync, this must be a LegacySyncImporter which returns its result directly; for render, it may be either a LegacySyncImporter or a LegacyAsyncImporter which calls a callback with its result.
See LegacySharedOptions.importer for more details.
The result of running a LegacyImporter. It must be one of the following types:
An object with the key contents whose value is the contents of a stylesheet (in SCSS syntax). This causes Sass to load that stylesheet’s contents.
An object with the key file whose value is a path on disk. This causes Sass to load that file as though it had been imported directly.
null, which indicates that it doesn’t recognize the URL and another importer should be tried instead.
An Error object, indicating that importing failed.
Options for render and renderSync. This can either be LegacyFileOptions to load a file from disk, or LegacyStringOptions to compile a string of Sass code.
See LegacySharedOptions for options that are shared across both file and string inputs.
A synchronous callback that implements a custom Sass function. This can be passed to LegacySharedOptions.functions for either render or renderSync.
If this throws an error, Sass will treat that as the function failing with that error message.
constresult = sass.renderSync({
file:'style.scss',
functions: {
"sum($arg1, $arg2)": (arg1, arg2) => {
if (!(arg1instanceofsass.types.Number)) {
thrownewError("$arg1: Expected a number");
} elseif (!(arg2instanceofsass.types.Number)) {
thrownewError("$arg2: Expected a number");
}
returnnewsass.types.Number(arg1.getValue() + arg2.getValue());
}
}
});
One argument for each argument that's declared in the signature that's passed to LegacySharedOptions.functions. If the signature takes arbitrary arguments, they're passed as a single argument list in the last argument.
A synchronous callback that implements custom Sass loading logic for @import rules and @use rules. This can be passed to LegacySharedOptions.importer for either render or renderSync.
See LegacySharedOptions.importer for more detailed documentation.
sass.renderSync({
file:"style.scss",
importer: [
function(url, prev) {
if (url != "big-headers") returnnull;
return {
contents:'h1 { font-size: 40px; }'
};
}
]
});
The @use or @import rule’s URL as a string, exactly as it appears in the stylesheet.
A string identifying the stylesheet that contained the @use or @import. This string’s format depends on how that stylesheet was loaded:
@use or @import rule that loaded it.A type representing all the possible values that may be passed to or returned from a LegacyFunction.
A shorthand for sass.types.Boolean.FALSE.
A shorthand for sass.types.Null.NULL.
A shorthand for sass.types.Boolean.TRUE.
This function asynchronously compiles a Sass file to CSS, and calls callback with a LegacyResult if compilation succeeds or LegacyException if it fails.
When using Dart Sass, renderSync is almost twice as fast as render by default, due to the overhead of making the entire evaluation process asynchronous.
constsass = require('sass'); // or require('node-sass');
sass.render({
file:"style.scss"
}, function(err, result) {
// ...
});
This function synchronously compiles a Sass file to CSS. If it succeeds, it returns the result, and if it fails it throws an error.
© 2006–2022 the Sass team, and numerous contributors
Licensed under the MIT License.
https://sass-lang.com/documentation/js-api/modules
Synchronously compiles the Sass file at
pathto CSS. If it succeeds it returns a CompileResult, and if it fails it throws an Exception.This only allows synchronous Importers and CustomFunctions.