Sass Blog

Page 1 of 6

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

The Discontinuation of node-fibers

Posted 26 March 2021 by Natalie Weizenbaum

We have recently received the unfortunate but not entirely surprising news that the node-fibers package has reached its end-of-life and will not be updated for compatibility with Node 16. Dart Sass has historically allowed JavaScript users to pass in node-fibers to improve the performance of the asynchronous render() method, but going forward this will unfortunately no longer be an option in Node 16 and on.

There are a number of alternative options for reclaiming this lost performance, some of them which are available today, some which are in development, and some which are theoretical but could be made real with pull requests from users like you. Sadly, none of the options that are ready today are drop-in solutions with the same level of ease-of-use as node-fibers, so if that performance is crucial to you we recommend staying on Node 14 for the time being.

What Happened? permalinkWhat Happened? permalink What Happened? permalinkWhat Happened?

In order to understand how we got here, it’s important to know two pieces of history…

Request for Comments: First-Class Calc

Posted 15 March 2021 by Natalie Weizenbaum

One of the absolutely most-requested features in Sass is the ability to more easily work with calc() expressions. These expressions have historically been parsed opaquely: between the parentheses, you can put any text at all, and Sass will just treat it as an unquoted string. This has simplified Sass’s parser, since we don’t have to support the specific calc() microsyntax, and it’s meant that we automatically support new features like the use of CSS variables within calc().

However, it comes at a substantial usability cost as well. Because each calc() is totally opaque to Sass’s parser, users can’t simply use Sass variables in place of values; they have to interpolate variables explicitly. And once a calc() expression has been created, there’s no way to manipulate it with Sass the way you can manipulate a plain number.

We’re looking to change that with a new proposal we call “First-Class Calc”. This proposal changes calc() (and other supported mathematical functions) from being parsed…

LibSass is Deprecated

Posted 26 October 2020 by Natalie Weizenbaum

After much discussion among the Sass core team, we’ve come to the conclusion that it’s time to officially declare that LibSass and the packages built on top of it, including Node Sass, are deprecated. For several years now, it’s been clear that there’s simply not enough engineering bandwidth behind LibSass to keep it up-to-date with the latest developments in the Sass language (for example, the most recent new language feature was added in November 2018). As much as we’ve hoped to see this pattern turn around, even the excellent work of long-time LibSass contributors Michael Mifsud and Marcel Greter couldn’t keep up with the fast pace of language development in both CSS and Sass.

I’ll go into detail about what this means below, but here are the major points:

  • We no longer recommend LibSass for new Sass projects. Use Dart Sass instead.

  • We recommend all existing LibSass users make plans to eventually move onto Dart Sass, and that all Sass libraries make plans to eventually drop support…

Request for Comments: HWB Functions

Posted 7 October 2020 by Natalie Weizenbaum

The CSS working group has been up to all sorts of exciting stuff recently in the Color Level 4 spec, and the Sass team is starting to think about how to integrate those cool new features into Sass’s color model. We need more time to hammer out exactly the right designs for complex features like the Lab color space, but that doesn’t mean we can’t add a few new color goodies.

Today we’re announcing a proposal for one such feature: built-in Sass functions for HWB colors! Once this proposal (drafted by Sass core team member Miriam Suzanne) is accepted and implemented, you’ll be able to write colors in HWB syntax and adjust their whiteness and blackness the same way you can adjust a color’s saturation and lightness today.

The Functions permalinkThe Functions permalink The Functions permalinkThe Functions

Here are the new and improved functions this proposal adds:

color.hwb() permalinkcolor.hwb() permalink color.hwb() permalinkcolor.hwb()

The color.hwb() function defines a color using its hue, whiteness, and blackness. Like the existing rgb() and hsl() functions, It can…

Next page