sass

• @import is now officially deprecated, as are global built-in functions that are available within built-in modules. See the Sass blog post for more details on the deprecation process.

Embedded Host

• Fix an error that would sometimes occur when deprecation warnings were emitted when using a custom importer with the legacy API.

• Fix a bug where Sass would add an extra */ after loud comments with whitespace after an explicit */ in the indented syntax.

• Potentially breaking bug fix: Adding text after an explicit */ in the indented syntax is now an error, rather than silently generating invalid CSS.

Embedded Host

• Properly export the SassBoolean type.

• Changes to how selector.unify() and @extend combine selectors:

  • The relative order of pseudo-classes (like :hover) and pseudo-elements (like ::before) within each original selector is now preserved when they're combined.

  • Pseudo selectors are now consistently placed at the end of the combined selector, regardless of which selector they came from. Previously, this reordering only applied to pseudo-selectors in the second selector.

• Tweak the color transformation matrices for OKLab and OKLCH to match the newer, more accurate values in the CSS spec.

• Fix a slight inaccuracy case when converting to srgb-linear and display-p3.

• Potentially breaking bug fix: math.unit() now wraps multiple denominator units in parentheses. For example, px/(em*em) instead of px/em*em.

Command-Line Interface

• Use @parcel/watcher to watch the filesystem when running from JavaScript and not using --poll. This should mitigate more frequent failures users have been seeing since version 4.0.0 of Chokidar, our previous watching tool, was released.

JS API

• Fix SassColor.interpolate() to allow an undefined options parameter, as the types indicate.

Embedded Sass

• Properly pass missing color channel values to and from custom functions.

JS API

• Fix a bug where passing green or blue to color.change() for legacy colors would fail.

• Update the $channel parameter in the suggested replacement for color.red(), color.green(), color.blue(), color.hue(), color.saturation(), color.lightness(), color.whiteness(), and color.blackness() to use a quoted string.

• Add a $space parameter to the suggested replacement for color.red(), color.green(), color.blue(), color.hue(), color.saturation(), color.lightness(), color.whiteness(), and color.blackness().

• Update deprecation warnings for the legacy JS API to include a link to relevant documentation.

• No user-visible changes.

• Breaking change: Passing a number with unit % to the $alpha parameter of color.change(), color.adjust(), change-color(), and adjust-color() is now interpreted as a percentage, instead of ignoring the unit. For example, color.change(red, $alpha: 50%) now returns rgb(255 0 0 / 0.5).

• Potentially breaking compatibility fix: Sass no longer rounds RGB channels to the nearest integer. This means that, for example, rgb(0 0 1) != rgb(0 0 0.6). This matches the latest version of the CSS spec and browser behavior.

• Potentially breaking compatibility fix: Passing large positive or negative values to color.adjust() can now cause a color's channels to go outside that color's gamut. In most cases this will currently be clipped by the browser and end up showing the same color as before, but once browsers implement gamut mapping it may produce a different result.

• Add support for CSS Color Level 4 color spaces. Each color value now tracks its color space along with the values of each channel in that color space. There are two general principles to keep in mind when dealing with new color spaces:

  1. With the exception of legacy color spaces (rgb, hsl, and hwb), colors will always be emitted in the color space they were defined in unless they're explicitly converted.

  2. The color.to-space() function is the only way to convert a color to another color space. Some built-in functions may do operations in a different color space, but they'll always convert back to the original space afterwards.

• rgb colors can now have non-integer channels and channels outside the normal gamut of 0-255. These colors are always emitted using the rgb() syntax so that modern browsers that are being displayed on wide-gamut devices can display the most accurate color possible.

• Add support for all the new color syntax defined in Color Level 4, including:

  • oklab(), oklch(), lab(), and lch() functions;
  • a top-level hwb() function that matches the space-separated CSS syntax;
  • and a color() function that supports the srgb, srgb-linear, display-p3, a98-rgb, prophoto-rgb, rec2020, xyz, xyz-d50, and xyz-d65 color spaces.

• Add new functions for working with color spaces:

  • color.to-space($color, $space) converts $color to the given $space. In most cases this conversion is lossless—the color may end up out-of-gamut for the destination color space, but browsers will generally display it as best they can regardless. However, the hsl and hwb spaces can't represent out-of-gamut colors and so will be clamped.

  • color.channel($color, $channel, $space: null) returns the value of the given $channel in $color, after converting it to $space if necessary. It should be used instead of the old channel-specific functions such as color.red() and color.hue().

  • color.same($color1, $color2) returns whether two colors represent the same color even across color spaces. It differs from $color1 == $color2 because == never consider colors in different (non-legacy) spaces as equal.

  • color.is-in-gamut($color, $space: null) returns whether $color is in-gamut for its color space (or $space if it's passed).

  • color.to-gamut($color, $space: null) returns $color constrained to its space's gamut (or to $space's gamut, if passed). This is generally not recommended since even older browsers will display out-of-gamut colors as best they can, but it may be necessary in some cases.

  • color.space($color): Returns the name of $color's color space.

  • color.is-legacy($color): Returns whether $color is in a legacy color space (rgb, hsl, or hwb).

  • color.is-powerless($color, $channel, $space: null): Returns whether the given $channel of $color is powerless in $space (or its own color space). A channel is "powerless" if its value doesn't affect the way the color is displayed, such as hue for a color with 0 chroma.

  • color.is-missing($color, $channel): Returns whether $channel's value is missing in $color. Missing channels can be explicitly specified using the special value none and can appear automatically when color.to-space() returns a color with a powerless channel. Missing channels are usually treated as 0, except when interpolating between two colors and in color.mix() where they're treated as the same value as the other color.

• Update existing functions to support color spaces:

  • hsl() and color.hwb() no longer forbid out-of-bounds values. Instead, they follow the CSS spec by clamping them to within the allowed range.

  • color.change(), color.adjust(), and color.scale() now support all channels of all color spaces. However, if you want to modify a channel that's not in $color's own color space, you have to explicitly specify the space with the $space parameter. (For backwards-compatibility, this doesn't apply to legacy channels of legacy colors—for example, you can still adjust an rgb color's saturation without passing $space: hsl).

  • color.mix() and color.invert() now support the standard CSS algorithm for interpolating between two colors (the same one that's used for gradients and animations). To use this, pass the color space to use for interpolation to the $method parameter. For polar color spaces like hsl and oklch, this parameter also allows you to specify how hue interpolation is handled.

  • color.complement() now supports a $space parameter that indicates which color space should be used to take the complement.

  • color.grayscale() now operates in the oklch space for non-legacy colors.

  • color.ie-hex-str() now automatically converts its color to the rgb space and gamut-maps it so that it can continue to take colors from any color space.

• The following functions are now deprecated, and uses should be replaced with the new color-space-aware functions defined above:

  • The color.red(), color.green(), color.blue(), color.hue(), color.saturation(), color.lightness(), color.whiteness(), and color.blackness() functions, as well as their global counterparts, should be replaced with calls to color.channel().

  • The global adjust-hue(), saturate(), desaturate(), lighten(), darken(), transaprentize(), fade-out(), opacify(), and fade-in() functions should be replaced by color.adjust() or color.scale().

• Add a global-builtin future deprecation, which can be opted-into with the --future-deprecation flag or the futureDeprecations option in the JS or Dart API. This emits warnings when any global built-in functions that are now available in sass: modules are called. It will become active by default in an upcoming release alongside the @import deprecation.

Dart API

• Added a ColorSpace class which represents the various color spaces defined in the CSS spec.

• Added SassColor.space which returns a color's color space.

• Added SassColor.channels and .channelsOrNull which returns a list of channel values, with missing channels converted to 0 or exposed as null, respectively.

• Added SassColor.isLegacy, .isInGamut, .channel(), .isChannelMissing(), .isChannelPowerless(), .toSpace(), .toGamut(), .changeChannels(), and .interpolate() which do the same thing as the Sass functions of the corresponding names.

• SassColor.rgb() now allows out-of-bounds and non-integer arguments.

• SassColor.hsl() and .hwb() now allow out-of-bounds arguments.

• Added SassColor.hwb(), .srgb(), .srgbLinear(), .displayP3(), .a98Rgb(), .prophotoRgb(), .rec2020(), .xyzD50(), .xyzD65(), .lab(), .lch(), .oklab(), .oklch(), and .forSpace() constructors.

• Deprecated SassColor.red, .green, .blue, .hue, .saturation, .lightness, .whiteness, and .blackness in favor of SassColor.channel().

• Deprecated SassColor.changeRgb(), .changeHsl(), and .changeHwb() in favor of SassColor.changeChannels().

• Added SassNumber.convertValueToUnit() as a shorthand for SassNumber.convertValue() with a single numerator.

• Added InterpolationMethod and HueInterpolationMethod which collectively represent the method to use to interpolate two colors.

JS API

• While the legacy API has been deprecated since we released the modern API, we now emit warnings when the legacy API is used to make sure users are aware that it will be removed in Dart Sass 2.0.0. In the meantime, you can silence these warnings by passing legacy-js-api in silenceDeprecations when using the legacy API.

• Modify SassColor to accept a new space option, with support for all the new color spaces defined in Color Level 4.

• Add SassColor.space which returns a color's color space.

• Add SassColor.channels and .channelsOrNull which returns a list of channel values, with missing channels converted to 0 or exposed as null, respectively.

• Add SassColor.isLegacy, .isInGamut(), .channel(), .isChannelMissing(), .isChannelPowerless(), .toSpace(), .toGamut(), .change(), and .interpolate() which do the same thing as the Sass functions of the corresponding names.

• Deprecate SassColor.red, .green, .blue, .hue, .saturation, .lightness, .whiteness, and .blackness in favor of SassColor.channel().

Embedded Sass

• Add Color SassScript value, with support for all the new color spaces defined in Color Level 4.

• Remove RgbColor, HslColor and HwbColor SassScript values.

• The meta.feature-exists function is now deprecated. This deprecation is named feature-exists.

• Fix a crash when using @at-root without any queries or children in the indented syntax.

JS API

• Backport the deprecation options (fatalDeprecations, futureDeprecations, and silenceDeprecations) to the legacy JS API. The legacy JS API is itself deprecated, and you should move off of it if possible, but this will allow users of bundlers and other tools that are still using the legacy API to still control deprecation warnings.

• Fix a bug where accessing SourceSpan.url would crash when a relative URL was passed to the Sass API.

Embedded Sass

• Explicitly expose a sass executable from the sass-embedded npm package. This was intended to be included in 1.63.0, but due to the way platform-specific dependency executables are installed it did not work as intended. Now users can run npx sass for local installs or just sass when sass-embedded is installed globally.

• Add linux-riscv64, linux-musl-riscv64, and android-riscv64 support for the sass-embedded npm package.

• Fix an edge case where the Dart VM could hang when shutting down when requests were in flight.

• Fix a race condition where the embedded host could fail to shut down if it was closed around the same time a new compilation was started.

• Fix a bug where parse-time deprecation warnings could not be controlled by the deprecation options in some circumstances.

• No user-visible changes.

• Declarations that appear after nested rules are deprecated, because the semantics Sass has historically used are different from the semantics specified by CSS. In the future, Sass will adopt the standard CSS semantics.

  See the Sass website for details.

• Potentially breaking bug fix: // in certain places such as unknown at-rule values was being preserved in the CSS output, leading to potentially invalid CSS. It's now properly parsed as a silent comment and omitted from the CSS output.

• Fix a few cases where comments and occasionally even whitespace wasn't allowed between the end of Sass statements and the following semicolon.

• Fully trim redundant selectors generated by @extend.

Embedded Sass

• Support passing Version input for fatalDeprecations as string over embedded protocol.

• Fix a bug in the JS Embedded Host where Version could be incorrectly accepted as input for silenceDeprecations and futureDeprecations in pure JS.

Dart API

• Deprecation.duplicateVariableFlags has been deprecated and replaced with Deprecation.duplicateVarFlags to make it consistent with the duplicate-var-flags name used on the command line and in the JS API.

• Don't emit deprecation warnings for functions and mixins beginning with __.

• Allow user-defined functions whose names begin with _ and otherwise look like vendor-prefixed functions with special CSS syntax.

Command-Line Interface

• Properly handle the --silence-deprecation flag.

• Handle the --fatal-deprecation and --future-deprecation flags for --interactive mode.

• Fix a crash that could come up with importers in certain contexts.

• Don't throw errors for at-rules in keyframe blocks.

• Throw errors for misplaced statements in keyframe blocks.

• Mixins and functions whose names begin with -- are now deprecated for forwards-compatibility with the in-progress CSS functions and mixins spec. This deprecation is named css-function-mixin.

• Fix a bug in which stylesheet canonicalization could be cached incorrectly when custom importers or the Node.js package importer made decisions based on the URL of the containing stylesheet.

JS API

• Allow importer to be passed without url in StringOptionsWithImporter.

• No user-visible changes.

• Support adjacent /s without whitespace in between when parsing plain CSS expressions.

• Allow the Node.js pkg: importer to load Sass stylesheets for package.json exports field entries without extensions.

• When printing suggestions for variables, use underscores in variable names when the original usage used underscores.

JavaScript API

• Properly resolve pkg: imports with the Node.js package importer when arguments are passed to the JavaScript process.

Command-Line Interface

• Ship the musl Linux release with the proper Dart executable.

JavaScript API

• Export the NodePackageImporter class in ESM mode.

• Allow NodePackageImporter to locate a default directory even when the entrypoint is an ESM module.

Dart API

• Make passing a null argument to NodePackageImporter() a static error rather than just a runtime error.

Embedded Sass

• In the JS Embedded Host, properly install the musl Linux embedded compiler when running on musl Linux.

For more information about pkg: importers, see the announcement on the Sass blog.

Command-Line Interface

• Add a --pkg-importer flag to enable built-in pkg: importers. Currently this only supports the Node.js package resolution algorithm, via --pkg-importer=node. For example, @use "pkg:bootstrap" will load node_modules/bootstrap/scss/bootstrap.scss.

JavaScript API

• Add a NodePackageImporter importer that can be passed to the importers option. This loads files using the pkg: URL scheme according to the Node.js package resolution algorithm. For example, @use "pkg:bootstrap" will load node_modules/bootstrap/scss/bootstrap.scss. The constructor takes a single optional argument, which indicates the base directory to use when locating node_modules directories. It defaults to path.dirname(require.main.filename).

Dart API

• Add a NodePackageImporter importer that can be passed to the importers option. This loads files using the pkg: URL scheme according to the Node.js package resolution algorithm. For example, @use "pkg:bootstrap" will load node_modules/bootstrap/scss/bootstrap.scss. The constructor takes a single argument, which indicates the base directory to use when locating node_modules directories.

JavaScript API

• Add a sass.initCompiler() function that returns a sass.Compiler object which supports compile() and compileString() methods with the same API as the global Sass object. On the Node.js embedded host, each sass.Compiler object uses a single long-lived subprocess, making compiling multiple stylesheets much more efficient.

• Add a sass.initAsyncCompiler() function that returns a sass.AsyncCompiler object which supports compileAsync() and compileStringAsync() methods with the same API as the global Sass object. On the Node.js embedded host, each sass.AsynCompiler object uses a single long-lived subprocess, making compiling multiple stylesheets much more efficient.

Embedded Sass

• Support the CompileRequest.silent field. This allows compilations with no logging to avoid unnecessary request/response cycles.

• The Dart Sass embedded compiler now reports its name as "dart-sass" rather than "Dart Sass", to match the JS API's info field.

Embedded Sass

• In the JS Embedded Host, properly install the x64 Dart Sass executable on ARM64 Windows.

• Produce better output for numbers with complex units in meta.inspect() and debugging messages.

• Escape U+007F DELETE when serializing strings.

• When generating CSS error messages to display in-browser, escape all code points that aren't in the US-ASCII region. Previously only code points U+0100 LATIN CAPITAL LETTER A WITH MACRON were escaped.

• Provide official releases for musl LibC and for Android.

• Don't crash when running meta.apply() in asynchronous mode.

JS API

• Fix a bug where certain exceptions could produce SourceSpans that didn't follow the documented SourceSpan API.

JS API

• Compatibility with Node.js 21.0.0.

• No user-visible changes.

Embedded Sass

• Fix TypeScript type locations in package.json.

JS API

• Fix a bug where Sass crashed when running in the browser if there was a global variable named process.

• No user-visible changes.

• Add a meta.get-mixin() function that returns a mixin as a first-class Sass value.

• Add a meta.apply() mixin that includes a mixin value.

• Add a meta.module-mixins() function which returns a map from mixin names in a module to the first-class mixins that belong to those names.

• Add a meta.accepts-content() function which returns whether or not a mixin value can take a content block.

• Add support for the relative color syntax from CSS Color 5. This syntax cannot be used to create Sass color values. It is always emitted as-is in the CSS output.

Dart API

• Deprecate Deprecation.calcInterp since it was never actually emitted as a deprecation.

Embedded Sass

• Fix a rare race condition where the embedded compiler could freeze when a protocol error was immediately followed by another request.

• Fix the source spans associated with the abs-percent deprecation.

JS API

• Non-filesystem importers can now set the nonCanonicalScheme field, which declares that one or more URL schemes (without :) will never be used for URLs returned by the canonicalize() method.

• Add a containingUrl field to the canonicalize() and findFileUrl() methods of importers, which is set to the canonical URL of the stylesheet that contains the current load. For filesystem importers, this is always set; for other importers, it's set only if the current load has no URL scheme, or if its URL scheme is declared as non-canonical by the importer.

Dart API

• Add AsyncImporter.isNonCanonicalScheme, which importers (async or sync) can use to indicate that a certain URL scheme will never be used for URLs returned by the canonicalize() method.

• Add AsyncImporter.containingUrl, which is set during calls to the canonicalize() method to the canonical URL of the stylesheet that contains the current load. This is set only if the current load has no URL scheme, or if its URL scheme is declared as non-canonical by the importer.

Embedded Sass

• The CalculationValue.interpolation field is deprecated and will be removed in a future version. It will no longer be set by the compiler, and if the host sets it it will be treated as equivalent to CalculationValue.string except that "(" and ")" will be added to the beginning and end of the string values.

• Properly include TypeScript types in the sass-embedded package.

• All functions defined in CSS Values and Units 4 are now once again parsed as calculation objects: round(), mod(), rem(), sin(), cos(), tan(), asin(), acos(), atan(), atan2(), pow(), sqrt(), hypot(), log(), exp(), abs(), and sign().

  Unlike in 1.65.0, function calls are not locked into being parsed as calculations or plain Sass functions at parse-time. This means that user-defined functions will take precedence over CSS calculations of the same name. Although the function names calc() and clamp() are still forbidden, users may continue to freely define functions whose names overlap with other CSS calculations (including abs(), min(), max(), and round() whose names overlap with global Sass functions).

• Breaking change: As a consequence of the change in calculation parsing described above, calculation functions containing interpolation are now parsed more strictly than before. However, almost all interpolations that would have produced valid CSS will continue to work. The only exception is #{$variable}% which is not valid in Sass and is no longer valid in calculations. Instead of this, either use $variable directly and ensure it already has the % unit, or write ($variable * 1%).

• Potentially breaking bug fix: The importer used to load a given file is no longer used to load absolute URLs that appear in that file. This was unintented behavior that contradicted the Sass specification. Absolute URLs will now correctly be loaded only from the global importer list. This applies to the modern JS API, the Dart API, and the embedded protocol.

Embedded Sass

• Substantially improve the embedded compiler's performance when compiling many files or files that require many importer or function call round-trips with the embedded host.

JS API

• Fix a bug where Sass compilation could crash in strict mode if passed a callback that threw a string, boolean, number, symbol, or bignum.

• Breaking change: Drop support for the additional CSS calculations defined in CSS Values and Units 4. Custom Sass functions whose names overlapped with these new CSS functions were being parsed as CSS calculations instead, causing an unintentional breaking change outside our normal [compatibility policy] for CSS compatibility changes.

  Support will be added again in a future version, but only after Sass has emitted a deprecation warning for all functions that will break for at least three months prior to the breakage.

• Update abs-percent deprecatedIn version to 1.65.0.

• All functions defined in CSS Values and Units 4 are now parsed as calculation objects: round(), mod(), rem(), sin(), cos(), tan(), asin(), acos(), atan(), atan2(), pow(), sqrt(), hypot(), log(), exp(), abs(), and sign().

• Deprecate explicitly passing the % unit to the global abs() function. In future releases, this will emit a CSS abs() function to be resolved by the browser. This deprecation is named abs-percent.

• No user-visible changes.

Embedded Sass

• Fix a bug where a valid SassCalculation.clamp() with less than 3 arguments would throw an error.

• Comments that appear before or between @use and @forward rules are now emitted in source order as much as possible, instead of always being emitted after the CSS of all module dependencies.

• Fix a bug where an interpolation in a custom property name crashed if the file was loaded by a @use nested in an @import.

JavaScript API

• Add a new SassCalculation type that represents the calculation objects added in Dart Sass 1.40.0.

• Add Value.assertCalculation(), which returns the value if it's a SassCalculation and throws an error otherwise.

• Produce a better error message when an environment that supports some Node.js APIs loads the browser entrypoint but attempts to access the filesystem.

Embedded Sass

• Fix a bug where nested relative @imports failed to load when using the deprecated functions render or renderSync and those relative imports were loaded multiple times across different files.

JavaScript API

• Fix import sass from 'sass' again after it was broken in the last release.

Embedded Sass

• Fix the exports declaration in package.json.

JavaScript API

• Fix a bug where loading the package through both CJS require() and ESM import could crash on Node.js.

Embedded Sass

• Fix a deadlock when running at high concurrency on 32-bit systems.

• Fix a race condition where the embedded compiler could deadlock or crash if a compilation ID was reused immediately after the compilation completed.

JavaScript API

• Re-enable support for import sass from 'sass' when loading the package from an ESM module in Node.js. However, this syntax is now deprecated; ESM users should use import * as sass from 'sass' instead.

  On the browser and other ESM-only platforms, only import * as sass from 'sass' is supported.

• Properly export the legacy API values TRUE, FALSE, NULL, and types from the ECMAScript module API.

Embedded Sass

• Fix a race condition where closing standard input while requests are in-flight could sometimes cause the process to hang rather than shutting down gracefully.

• Properly include the root stylesheet's URL in the set of loaded URLs when it fails to parse.

JavaScript API

• Fix loading Sass as an ECMAScript module on Node.js.

• No user-visible changes.

• No user-visible changes.

• Fix a bug where :has(+ &) and related constructs would drop the leading combinator.

• Deprecate the use of multiple !global or !default flags on the same variable. This deprecation is named duplicate-var-flags.

• Allow special numbers like var() or calc() in the global functions: grayscale(), invert(), saturate(), and opacity(). These are also native CSS filter functions. This is in addition to number values which were already allowed.

• Fix a cosmetic bug where an outer rule could be duplicated after nesting was resolved, instead of re-using a shared rule.

• Potentially breaking change: Drop support for End-of-Life Node.js 12.

• Fix remaining cases for the performance regression introduced in 1.59.0.

Embedded Sass

• The JS embedded host now loads files from the working directory when using the legacy API.

• Add support for the pi, e, infinity, -infinity, and NaN constants in calculations. These will be interpreted as the corresponding numbers.

• Add support for unknown constants in calculations. These will be interpreted as unquoted strings.

• Serialize numbers with value infinity, -infinity, and NaN to calc() expressions rather than CSS-invalid identifiers. Numbers with complex units still can't be serialized.

• Fix a performance regression introduced in 1.59.0.

• The NPM release of 1.59.0 dropped support for Node 12 without actually indicating so in its pubspec. This release temporarily adds back support so that the latest Sass version that declares it supports Node 12 actually does so. However, Node 12 is now end-of-life, so we will drop support for it properly in an upcoming release.

• No user-visible changes.

• No user-visible changes.

Command Line Interface

• Added a new --fatal-deprecation flag that lets you treat a deprecation warning as an error. You can pass an individual deprecation ID (e.g. slash-div) or you can pass a Dart Sass version to treat all deprecations initially emitted in that version or earlier as errors.

• New --future-deprecation flag that lets you opt into warning for use of certain features that will be deprecated in the future. At the moment, the only option is --future-deprecation=import, which will emit warnings for Sass @import rules, which are not yet deprecated, but will be in the future.

Dart API

• New Deprecation enum, which contains the different current and future deprecations used by the new CLI flags.

• The compile methods now take in fatalDeprecations and futureDeprecations parameters, which work similarly to the CLI flags.

• No user-visible changes.