Sass Blog

Page 1 of 7

Request for Comments: Color Spaces

Posted 21 September 2022 by Miriam Suzanne and Natalie Weizenbaum

There’s been a lot of exciting work in the CSS color specifications lately, and as it begins to land in browsers we’ve been preparing to add support for it in Sass as well. The first and largest part of that is adding support for color spaces to Sass, which represents a huge (but largely backwards-compatible) rethinking of the way colors work.

Historically, all colors in CSS have existed in the same color space, known as “sRGB”. Whether you represent them as a hex code, an hsl() function, or a color name, they represented the same set of visible colors you could tell a screen to display. While this is conceptually simple, there are some major downsides:

  • As monitors have improved over time, they’ve become capable of displaying more colors than can be represented in the sRGB color space.

  • sRGB, even when you’re using it via hsl(), doesn’t correspond very well with how humans perceive colors. Cyan looks noticeably lighter than purple with the same saturation and lightness values.

  • There…

Request for Comments: Strict Unary Operators

Posted 15 June 2022 by Natalie Weizenbaum

Do you know what margin: $a -$b does in Sass? If you said “the same thing as margin: $a (-$b), I’m sorry, but you’re wrong. It’s actually the same thing as margin: $a - $b. Don’t worry, you’re not the first person to get tripped up by this weird corner of Sass’s parser! But our new language proposal aims to fix that.

In the Strict Unary Operators proposal, which is currently open for community feedback, we propose to first deprecate and then eventually disallow expressions of the form $a -$b. We know deprecations are never pleasant, but this should be fairly painless as they go: you can simply write $a - $b or $a (-$b), depending which you intend. We’ll also provide a Sass migrator migration to automatically update your stylesheets.

Deprecated:

  • $a -$b will no longer be allowed, because it’s unclear what the author intended and the current behavior is likely to be incorrect.

Still allowed:

  • $a - $b will continue to work, since it’s clearly supposed to indicate subtraction.

  • $a ...

Embedded Sass is Live

Posted 1 February 2022 by Natalie Weizenbaum

After several years of planning and development, I’m excited to finally announce the stable release of Embedded Dart Sass along with its first official wrapper, the sass-embedded package available now on npm!

Embedded Sass is an ongoing effort to make a highly-performant Sass library available to as many different languages as possible, starting with Node.js. Although Node.js already has access to the pure-JS sass package, the nature of JavaScript inherently limits how quickly this package can process large Sass files especially in asynchronous mode. We expect sass-embedded to be a major boon to developers for whom compilation speed is a concern, particularly the remaining users of node-sass for whom performance has been a major reason to avoid Dart Sass.

The sass-embedded package fully supports the new JS API as well as the legacy API other than a few cosmetic options. You can use it as a drop-in replacement for the sass package, and it should work with all the same build plugins…

New JS API Release Candidate is Live

Posted 21 November 2021 by Natalie Weizenbaum

The new JavaScript API that we announced a few months ago is now fully implemented in Dart Sass and ready for you to try! The new API is designed to be more idiomatic, performant, and usable than the old one, and we hope it’ll be adopted swiftly by tooling packages.

Because this is such a substantial addition, we want to give users a chance to kick the tires a bit before we set it in stone, so we’ve released it as a release candidate in Dart Sass 1.45.0-rc.1. Download it, try it out, and let us know what you think by filing issues or sending us a tweet. Unless major changes are necessary, we plan to make a stable release some time next week.

How to use it permalinkHow to use it permalink How to use it permalinkHow to use it

The new API comes with four new entrypoint functions: compile() and compileAsync() take Sass file paths and return the result of compiling them to CSS, while compileString() and compileStringAsync() take a string of Sass source and compile it to CSS. Unlike the old API, the async functions all return Promise

Request for Comments: New JS API

Posted 5 August 2021 by Natalie Weizenbaum

I’m excited to officially unveil something that’s been in the works for quite a while now: a (proposal for a) brand new JavaScript API for Sass. This API has been redesigned from the ground up based on lessons learned from both the Node Sass API and various other historical Sass APIs in other languages through the years, and it addresses many of the shortcomings of the existing API.

The API has four main components, all of which I’ll cover in this post:

As you read on, remember that this API is still just a proposal. We want to hear from you, our users, whether it meets your needs and how we can improve it before we lock it in to a full release. So go ahead and make your voices known on the issue tracker!

Why a New API? permalinkWhy a New API? permalink Why a New API? permalinkWhy a New API?

The existing JavaScript API is showing its age. It predates Dart Sass, having been originally designed for the node-sass package, which wrapped the now-deprecated

Next page