Sass Blog
Page 1 of 7
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
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…