Options that can be passed tocompile,compileAsync,compileString, orcompileStringAsync.
Type Parameters
sync extends"sync" |"async"
This lets the TypeScript checker verify that asynchronousImporters,FileImporters, andCustomFunctions aren'tpassed tocompile orcompileString.
Hierarchy
- Options
- Defined injs-api-doc/options.d.ts:91
Input
Optional
load Paths
Paths in which to look for stylesheets loaded by rules like@use
and@import
.
A load pathloadPath
is equivalent to the followingFileImporter:
{
findFileUrl(url) {
// Load paths only support relative URLs.
if (/^[a-z]+:/i.test(url))returnnull;
returnnewURL(url,pathToFileURL(loadPath));
}
}
- Defined injs-api-doc/options.d.ts:285
Output
Optional
charset
- Dart Sass
- since 1.54.0
- Node Sass
- ✗
Iftrue
, the compiler may prepend@charset "UTF-8";
or U+FEFF(byte-order marker) if it outputs non-ASCII CSS.
Iffalse
, the compiler never emits these byte sequences. This is idealwhen concatenating or embedding inHTML<style>
tags. (The output willstill be UTF-8.)
Default Value
true
- Defined injs-api-doc/options.d.ts:124
Optional
source Map
Whether or not Sass should generate a source map. If it does, the sourcemap will be available assourceMap.
⚠️ Heads up!
Sass doesn’t automatically add asourceMappingURL
commentto the generatedCSS. It’s up to callers to do that, since callers havefull knowledge of where theCSS and the source map will exist in relationto one another and how they’ll be served to the browser.
Default Value
false
- Defined injs-api-doc/options.d.ts:348
Optional
source Map Include Sources
Whether Sass should include the sources in the generated source map.
This option has no effect ifsourceMap isfalse
.
Default Value
false
- Defined injs-api-doc/options.d.ts:358
Optional
style
TheOutputStyle of the compiled CSS.
Example
constsource =`
h1 {
font-size: 40px;
code {
font-face: Roboto Mono;
}
}`;
letresult =sass.compileString(source, {style:"expanded"});
console.log(result.css.toString());
// h1 {
// font-size: 40px;
// }
// h1 code {
// font-face: Roboto Mono;
// }
result =sass.compileString(source, {style:"compressed"})
console.log(result.css.toString());
// h1{font-size:40px}h1 code{font-face:Roboto Mono}
- Defined injs-api-doc/options.d.ts:390
Plugins
Optional
functions
Additional built-in Sass functions that are available in all stylesheets.This option takes an object whose keys are Sass function signatures likeyou'd write for the@function rule
and whosevalues areCustomFunctions.
Functions are passed subclasses ofValue, and must return the same.If the return value includesSassCalculations they will besimplified before being returned.
When writing custom functions, it's important to make them as user-friendlyand as close to the standards set by Sass's core functions as possible. Somegood guidelines to follow include:
Use
Value.assert*
methods, likeassertString, to castuntypedValue
objects to more specific types. For values that werepassed directly as arguments, pass in the argument name as well. Thisensures that the user gets good error messages when they pass in thewrong type to your function.Individual classes may have more specific
assert*
methods, likeassertInt, which should be used when possible.In Sass, every value counts as a list. Rather than trying to detect theSassList type, you should useasList to treat allvalues as lists.
When manipulating values like lists, strings, and numbers that havemetadata (comma versus space separated, bracketed versus unbracketed,quoted versus unquoted, units), the output metadata should match theinput metadata.
When in doubt, lists should default to comma-separated, strings shoulddefault to quoted, and numbers should default to unitless.
In Sass, lists and strings use one-based indexing and use negativeindices to index from the end of value. Functions should follow theseconventions.sassIndexToListIndex andsassIndexToStringIndex can be used to do this automatically.
String indexes in Sass refer to Unicode code points while JavaScriptstring indices refer toUTF-16 code units. For example, the characterU+1F60ASMILINGFACEWITHSMILINGEYES is a single Unicode code point butis represented inUTF-16 as two code units (
0xD83D
and0xDE0A
). So inJavaScript,"a😊b".charCodeAt(1)
returns0xD83D
, whereas in Sassstr-slice("a😊b", 1, 1)
returns"😊"
. Functions should follow Sass'sconvention.sassIndexToStringIndex can be used to dothis automatically, and thesassLength getter can beused to access a string's length in code points.
Example
sass.compileString(`
h1 {
font-size: pow(2, 5) * 1px;
}`, {
functions: {
// Note: in real code, you should use `math.pow()` from the built-in
// `sass:math` module.
'pow($base, $exponent)':function(args) {
constbase =args[0].assertNumber('base').assertNoUnits('base');
constexponent =
args[1].assertNumber('exponent').assertNoUnits('exponent');
returnnewsass.SassNumber(Math.pow(base.value,exponent.value));
}
}
});
- Defined injs-api-doc/options.d.ts:214
Optional
importers
Custom importers that control how Sass resolves loads from rules like@use
and@import
.
Loads are resolved by trying, in order:
For relative URLs only: theURL resolved relative to the currentstylesheet's canonicalURL, passed to the importer that loaded the current stylesheet.
When callingcompileString orcompileStringAsync, theentrypoint file isn't "loaded" in the same sense as other files. In that case:
url is the canonicalURL andimporter is the importer that loaded it.
Ifimporter isn't passed andurl is a
file:
URL, theURL is loaded from thefilesystem by default. (You can disable this by passing{canonicalize: url => null}
asimporter.)Ifurl isn't passed butimporter is, the relativeURL is passed toimporter as-is.
EachImporter,FileImporter, orNodePackageImporter inimporters, in order.
Each load path inloadPaths, in order.
If none of these return a Sass file, the load fails and Sass throws an error.
- Defined injs-api-doc/options.d.ts:264
Messages
Optional
alert Ascii
If this istrue
, the compiler will exclusively useASCII characters inits error and warning messages. Otherwise, it may use non-ASCII Unicodecharacters as well.
Default Value
false
- Defined injs-api-doc/options.d.ts:100
Optional
alert Color
If this istrue
, the compiler will useANSI color escape codes in itserror and warning messages. If it'sfalse
, it won't use these. If it'sundefined, the compiler will determine whether or not to use colorsdepending on whether the user is using an interactive terminal.
- Defined injs-api-doc/options.d.ts:110
Optional
fatal Deprecations
A set of deprecations to treat as fatal.
If a deprecation warning of any provided type is encountered duringcompilation, the compiler will error instead.
If aVersion
is provided, then all deprecations that were active in thatcompiler version will be treated as fatal.
Compatiblity
dart: "1.74.0", node: false
- Defined injs-api-doc/options.d.ts:138
Optional
future Deprecations
A set of future deprecations to opt into early.
Future deprecations passed here will be treated as active by the compiler,emitting warnings as necessary.
Compatiblity
dart: "1.74.0", node: false
- Defined injs-api-doc/options.d.ts:225
Optional
logger
An object to use to handle warnings and/or debug messages from Sass.
By default, Sass emits warnings and debug messages to standard error, butifwarn ordebug is set, this will invokethem instead.
The special valuesilent can be used to easily silence all messages.
- Defined injs-api-doc/options.d.ts:299
Optional
quiet Deps
If this option is set totrue
, Sass won’t print warnings that are causedby dependencies. A “dependency” is defined as any file that’s loadedthroughloadPaths orimporters. Stylesheets that areimported relative to the entrypoint are not considered dependencies.
This is useful for silencing deprecation warnings that you can’t fix onyour own. However, pleasealso notify your dependencies of the deprecationsso that they can get fixed as soon as possible!
⚠️ Heads up!
IfcompileString orcompileStringAsync iscalled withouturl,all stylesheets it loadswill be considered dependencies. Since it doesn’t have a path of its own,everything it loads is coming from a load path rather than a relative import.
Default Value
false
- Defined injs-api-doc/options.d.ts:320
Optional
silence Deprecations
A set of active deprecations to ignore.
If a deprecation warning of any provided type is encountered duringcompilation, the compiler will ignore it instead.
⚠️ Heads up!
The deprecated functionality you’re depending on willeventually break.
Compatiblity
dart: "1.74.0", node: false
- Defined injs-api-doc/options.d.ts:334
Optional
verbose
By default, Dart Sass will print only five instances of the samedeprecation warning per compilation to avoid deluging users in consolenoise. If you setverbose
totrue
, it will instead print everydeprecation warning it encounters.
Default Value
false
- Defined injs-api-doc/options.d.ts:401