Sass Blog

Page 1 of 8

  • Announcing `pkg:` Importers

    Posted 16 February 2024 by Natalie Weizenbaum

    Several months ago, we asked for feedback on a proposal for a new standard for importers that could load packages from various different package managers using the shared pkg: scheme, as well as a built-in pkg: importer that supports Node.js’s module resolution algorithm. Today, I’m excited to announce that this feature has shipped in Dart Sass 1.71.0!

    No longer will you have to manually add node_modules to your loadPaths option and worry about whether nested packages will work at all. No longer will you need to add ~s to your URLs and give up all portability. Now you can just pass importers: [new NodePackageImporter()] and write @use 'pkg:library' and it’ll work just how you want out of the box.

    What is a pkg: importer?What is a pkg: importer? permalink

    Think of a pkg: importer like a specification that anyone can implement by writing a custom importer that follows a few rules. We’ve implemented one for the Node.js module algorithm, but you could implement one that loads Sass…

  • Request for Comments: Package Importer

    Posted 26 September 2023 by James Stuckey Weber

    Sass users often need to use styles from a dependency to customize an existing theme or access styling utilities. Historically, Sass has not specified a standard method for using packages from dependencies. This has led to a variety of domain-specific solutions, including the ~ prefix in Webpack, and adding node_modules to loadPaths.

    This has been a common pain point, and can make it difficult to rely on dependencies. It can also make it more difficult to move your project to a new build process.

    Package ImportersPackage Importers permalink

    We are proposing a new type of importer that allows users to use the pkg: URL scheme to direct Sass to resolve the dependency URL using the resolution standards and conventions for a specific environment.

    To address the largest use case, we are proposing a built-in Package Importer for the Node ecosystem. Our recommendation is for package authors to define a sass conditional export for entry points to their package in their distributed package.json. For example, a package.json containing:…

  • Sass in the Browser

    Posted 7 July 2023 by Natalie Weizenbaum

    Over Sass’s lifetime, we’ve seen many of the features we’ve pioneered adopted in the browser. CSS variables, math functions, and most recently nesting were all inspired by Sass. But running Sass itself as a compiler in the browser was never possible… until now.

    With the release of Dart Sass 1.63, we’re officially adding support to the sass npm package for running directly in the browser. No longer do creators of playgrounds or web IDEs need to make server calls to compile their Sass. Now you can just load it up and use it right on your very page.

    You can try it right now, in fact! Just open up your developer console and run this:

    const sass = await import('https://jspm.dev/sass');
sass.compileString('a {color: #663399}');

    How Else Can I Use It?How Else Can I Use It? permalink

    We’ve done our best to make sure that Sass in the browser is usable as many ways as possible. It can be…

  • Request for Comments: New Embedded Protocol

    Posted 20 May 2023 by Natalie Weizenbaum

    If you’re not an author of a host package for the Embedded Sass Protocol, you can skip this blog post—although if you’re a big enough nerd, you may find it interesting regardless!

    We’re planning to make a number of breaking changes to the Embedded Sass Protocol, and we want your feedback before we lock in the new way of doing things. We intend to make a number of breaking changes all at once to keep the total number of disruptions to a minimum.

    We’re planning two major breaking changes:

    1. The Dart Sass embedded host will no longer be released as a separate executable. It will now be bundled into the main Dart Sass executable, accessible by running sass --embedded.

    2. Every packet in the embedded protocol now includes a compilation ID as part of the packet structure, rather than declaring it in the protocol buffer definitions.

    We’re using this opportunity to also introduce three much smaller breaking changes:

    1. The specification for the embedded protocol and the protocol buffer definition have…

  • Sass and Native Nesting

    Posted 29 March 2023 by Natalie Weizenbaum

    The stable release of Chrome 112, which is releasing today, is the first stable browser to add support for the new native CSS nesting feature. This feature—inspired by Sass’s nesting—adds the ability to nest style rules in plain CSS, and even uses Sass’s convention of & to refer to the parent selector.

    We here at Sass HQ are honored every time our language design inspires improvements in CSS itself. We’re excited to see the usability and clarity benefits of nesting brought to even more CSS authors as more browsers continue to roll out support for this feature.

    The Future of Sass NestingThe Future of Sass Nesting permalink

    This raises an important question, though: what will happen to Sass’s nesting? First of all, we won’t ever change existing valid Sass code so that it starts emitting CSS that’s incompatible with widely-used browsers. This means that even if we did decide to phase out Sass nesting and just emit plain CSS nesting instead, we wouldn’t do so until 98% of…

Next page