The Dart Sass Update: Changing @Import and Introducing Sass Modules

10-07-19 Philip Zastrow

Philip Zastrow shares his hot take on the new Sass update (version 1.23.0). He discusses the replacements to @import and other changes to the language.

The Sass team launched a new version of Dart Sass last week (version 1.23.0), and it shows the incredible momentum behind the CSS extension language. After we saw Ruby Sass put out to pasture earlier this year, it is exciting to see this new release that starts changing some basic functionality of Sass. The big news is that version 1.23.0 provides a more powerful replacement for @import, which will be (but is not yet) deprecated. Here are my quick takeaways after reading Natalie Weizenbaum’s post on the Sass Blog and playing around with the new features a bit.

  1. The changes that @use and @forward bring as replacements for @import are going to affect how Sass projects are structured—but definitely for the better. With @import, Sass variables and mixins were global. This shift to @use and @forward means scoped and componentized code truly comes to Sass.

  2. Scoping Sass makes so much more sense now. To handle scoped Sass (e.g. mixins and variables exclusive to a partial), we usually put it in a parent selector in the file or at the top of the file. But now we can be far more granular and create mixin files for a component, and we can have duplicate variables and mixin names without any worry. I think this is a big win.

  3. I don’t think this will affect our use of BEM since BEM is a way to pass styles off to HTML elements.

  4. This could have a big impact on ITCSS in implementation. I think in practice we will still structure our CSS files to follow the ITCSS principles for the cascade, but how that happens will likely change and in big ways. ITCSS may begin to break down into even smaller parts, where objects and components have their own scoped settings and tools living in the same directory. Maybe this update will pave a way to more effectively organize Sass into a pods structure.

  5. The changes to the syntax and function of built-in modules (e.g. color functions) make sense, and I think overall they will give Sass room to create more such modules. As an example, adjust-color is becoming color.adjust. In the meantime, it will be a learning curve, especially since not all modules are being ported to this new format. For example, the lighten() color function is not currently supported in the new format.

  6. Dart Sass 1.23.0 is a big update for the language and shows a lot of promise for its future. Sass revolutionized how we write and think about CSS, and it’s starting to do that again.

If you do any work with Sass, I highly recommend forking Patrick Fulton’s test repo—that’s where the Sparkbox team is testing. If you want to see some more examples of @use and @forward in use, check out the teacup repo from Miriam Suzanne. Miriam also has a fantastic article on CSS-Tricks that takes an in-depth look at this latest update. There’s certainly a lot more that will come about from this latest release. After 12 years of Sass, this update is getting the language positioned for the next 12 years.