Sass Blog

Page 2 of 9

Previous page

• 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…

• Security Alert: Tar Permissions

  Posted 10 December 2022 by Natalie Weizenbaum

  The Sass team was recently alerted by prolific external contributor @ntkme to a security issue in our release process.

  TL;DRTL;DR permalink

  If you’re using Linux or Mac OS, run ls -ax path/to/sass. If the last group of letters in the first column contains w, you’re vulnerable:

  Vulnerable:
  -rwxr-xrwx 1 nweiz primarygroup 407 Dec 13 12:33 sass-1.56.2/sass
  
  Not vulnerable:
  -rwxr-xr-x 1 nweiz primarygroup 407 Dec 13 12:33 sass-1.56.2/sass
  

  If you’re using the sass-embedded package, do the same thing for node_modules/sass-embedded/dist/lib/src/vendor/dart-sass-embedded/dart-sass-embedded.

  Who’s Affected?Who’s Affected? permalink

  While we don’t expect this issue to be a problem for the vast majority of users, it does affect the following groups:

  • Users who downloaded the stand-alone Dart Sass, Dart Sass Embedded, or Sass Migrator .tar.gz archives from the Dart Sass website and extracted them as the Unix root user.

  • Users who installed the sass-embedded npm package as the Unix root user prior to version 1.54.5.

  • Users who installed the “non-native” version of the community-maintained sass-embedded RubyGems package as the Unix root…

• 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’s…

Next page