Dart Sass 1.15, released today and available on npm and all other distribution channels, brings with it a number of highly-anticipated new Sass features. This is also the first release of Dart Sass with major new language features that aren't just for CSS compatibility. That's a big accomplishment, and we intend to continue that pattern moving forward!
Mixins that take
@content blocks can now pass arguments to those blocks. This is written
@content(<arguments...>). If a mixin passes arguments to its content block, users of that mixin must accept those arguments by writing
@include <name> using (<arguments...>). The argument list for a content block works just like a mixin's argument list, and the arguments passed to it by
@content work just like passing arguments to a mixin.
For more details, see the feature proposal. This feature is implemented in LibSass, and will be released in version 3.6.0. Since Ruby Sass is deprecated and this isn't a CSS compatibility feature, it won't be implemented in Ruby Sass.
Color Level 4 Syntax for
The CSS Color Module Level 4 has introduced new syntax for the
hsl() functions, which has begun to be supported in browsers. This syntax makes these functions more compact, allows the alpha value to be specified without needing additional
hsla() functions, and it looks like
rgb(0 255 0 / 0.5) and
hsla(0 100% 50%).
To support this function, Sass's
hsl() functions now accept a space-separated list of components as a single argument. If this last argument is a slash-separated pair of numbers, the first number will be treated as the blue channel or lightness (respectively) and the second as the alpha channel.
Be aware though that the normal rules for disambiguating between division and
/ as a separator still apply! So if you want to pass a variable for the alpha value, you'll need to use the old
rgba() syntax. We're considering possible long-term solutions for this problem as
/ is used more prominently as a separator in CSS.
In addition, the new color spec defines the
hsla() functions as pure aliases for
hsl(), and adds support for the four-argument
hsla() syntax to
hsl() as well. To match this behavior, Sass is also defining
hsla() as aliases and adding support for all their definitions to
All in all, this means that the function calls like all of the following are newly supported in Sass:
rgb(0 255 0),
rgb(0% 100% 0%),
rgb(0 255 0 / 0.5), and
rgb(0, 255, 0, 0.5);
hsl(0 100% 50%),
hsl(0 100% 50% / 0.5), and
hsl(0, 100%, 50%, 0.5);
rgba(0, 255, 0)and
hsla(0, 100%, 50%);
This change is fully backwards-compatible, so all the arguments to
hsla() that previously worked will continue to do so.
Interpolated At-Rule Names
This feature is a little smaller than the last two, but it's been on the to-do list for even longer: adding support for interpolation in the names of at-rules! This works just how you'd expect:
For more details, see the feature proposal. This feature isn't yet implemented in LibSass. Since Ruby Sass is deprecated and this isn't a CSS compatibility feature, it won't be implemented in Ruby Sass.