Sass Blog

https://sass-lang.com/blog

Syntactically Awesome Style Sheets

フィード

記事のアイキャッチ画像
LibSass Has Reached End-Of-Life
Sass Blog
LibSass and the packages built on top of it have been deprecated since October2020. In the five years since we made that announcement, the Sass language hascontinued to evolve to support the latest CSS features like color spaces, andembedded sass made it easy to run Dart Sass across numerous differentlanguages and platforms.[1] Dart Sass now meets essentially all the use-casesthat LibSass once did.At the same time, development of LibSass has faltered. There hasn't been a newcommit to the source code repository since December 2023, and there are numerousissues languishing unaddressed. The time has come to be clear: LibSass is nolonger maintained and will receive no future updates.Migrating AwayMigrating Away permalinkAs they say, the best time to migrate away from LibSass was five years ago, butthe second best time is now. There is a large and growing list ofincompatibilities between it and Dart Sass, largely to more correctly supportCSS features. You'll need to make sure your styleshee
3日前
記事のアイキャッチ画像
Request for Comments: Indented Syntax Improvements
Sass Blog
For users of the indented syntax (.sass), there has been a long standingrequest for the ability to have line breaks that don't end a statement. CertainCSS syntaxes like grid-template and @font-face src declarations are long,and line breaks can greatly increase the readability of the styles.There have been many suggestions, several attempts, and numerous workarounds toaddress this pain point. We are proposing several new syntax options in theindented syntax that add considerable flexibility and look to address this aspart of the language.Multiline statementsMultiline statements permalinkWe propose allowing statements in the indented syntax to span multiple lines, aslong as line breaks occur in places where the statement can't end.A common way of using this syntax will be wrapping lists with line breaks inparentheses. This allows for a grid-template declaration on multiple lines..grid display: grid grid-template: ( "header" min-content "main" 1fr )As usual, these parentheses will not be
1年前
記事のアイキャッチ画像
`@import` is Deprecated
Sass Blog
Back in 2019, we released the Sass module system, adding new @use and@forward rules to the language that were designed to replace @import andmake stylesheets more maintainable and less error-prone. We can now announcethat @import is officially deprecated as of Dart Sass 1.80.0.The module system ensures that it's easy for both developers and tooling todetermine where a given Sass member is defined, adds namespacing to prevent theneed to manually add long, awkward namespaces to names, and allows libraryauthors to ensure their private helpers can't be accessed by downstream users.Additionally, since each module is only ever loaded once, depending on the samestylesheet multiple times no longer results in duplicated CSS.With 4.5 years since we released the module system and more than a year sincewe passed the 80% Dart Sass usage share threshold we set for starting thisdeprecation, we feel comfortable making this move. However, we understand thatthis is a big change to the language and not a
1年前
記事のアイキャッチ画像
Sass color spaces & wide gamut colors
Sass Blog
Wide gamut colors are coming to Sass!I should clarify. Wide gamut CSS color formats like oklch(…) and color(display-p3 …) have been available in all major browsers since May, 2023. But even before that, these new color formats were allowed in Sass. This is one of my favorite features of Sass: most new CSS just works, without any need for "official" support or updates. When Sass encounters unknown CSS, it passes that code along to the browser. Not everything needs to be pre-processed.Often, that's all we need. When Cascade Layers and Container Queries rolled out in browsers, there was nothing more for Sass to do. But the new CSS color formats are a bit different. Since colors are a first-class data type in Sass, we don't always want to pass them along as-is. We often want to manipulate and manage colors before they go to the browser.Already know all about color spaces? Skip ahead to the new Sass features!The color format trade-offThe color format trade-off permalinkCSS has historically
1年前
記事のアイキャッチ画像
Node Sass is end-of-life
Sass Blog
The time has finally come to retire Node Sass. This Node.js wrapper for LibSasswas the first official Sass compiler available in the JavaScript ecosystem andwas a huge part of Sass growing beyond the scope of the Ruby community where itoriginated, but it hasn't received a new release in a year and a half and themost recent set of maintainers no longer have the bandwidth to continue updatingit.The npm package has been marked as deprecated, and the GitHub repository hasbeen archived to mitigate confusion about which Sass repositories are stillbeing developed. If you're still using Node Sass, we strongly recommend you takethis opportunity to migrate to the primary implementation, Dart Sass, instead.The LibSass implementation that Node Sass used remains deprecated but not yetend-of-life, as its maintainer Marcel Greter continues to make occasional fixes.However, there is no longer an officially-supported way to use thisimplementation from Node.js.I want to take this opportunity to thank ev
1年前
記事のアイキャッチ画像
Announcing `pkg:` Importers
Sass Blog
Several months ago, we asked for feedback on a proposal for a new standard forimporters that could load packages from various different package managers usingthe shared pkg: scheme, as well as a built-in pkg: importer that supportsNode.js's module resolution algorithm. Today, I'm excited to announce that thisfeature has shipped in Dart Sass 1.71.0!No longer will you have to manually add node_modules to your loadPathsoption and worry about whether nested packages will work at all. No longer willyou need to add ~s to your URLs and give up all portability. Now you can justpass importers: [new NodePackageImporter()] and write @use 'pkg:library' andit'll work just how you want out of the box.What is a pkg: importer?What is a pkg: importer? permalinkThink of a pkg: importer like a specification that anyone can implement bywriting a custom importer that follows a few rules. We've implemented one forthe Node.js module algorithm, but you could implement one that loads Sass filesfrom RubyGems or
2年前