Sass Color Spaces & Wide Gamut Colors

Inspect and manipulate the new CSS color formats in Sass!

by Miriam Suzanne at Sass Blog on September 19, 2024

CSS has a range of new color functions that support wider color gamuts (like display-p3) and perceptually uniform color adjustments (like oklch). Sass now provides additional tools for working with these new color formats, and converting between them.

Read the full article »

If you want to learn more about CSS color spaces and the tradeoff they provide, or if you’re just interested in the new Sass functionality, I’ve written about it on the Sass Blog.

Some of the highlights:

Sass colors have a ‘space’ that they are defined in. We can inspect that using color.space().
A color’s space doesn’t change unless we explicitly convert between spaces using color.to-space().
Out-of-gamut channels are also preserved unless we explicitly adjust a color into a specific gamut using color.to-gamut().
Color manipulation and inspection functions like color.adjust() or color.channel() accept a $space parameter for making adjustments or inspecting in an arbitrary color space.

Featured Workshop

Mia from behind,
standing at a laptop -
speaking to a conference audience
and gesturing to one side

Cascading Style Systems

A workshop on resilient & maintainable CSS

by Miriam

New CSS features are shipping at an unprecedented rate – cascade layers, container queries, the :has() selector, subgrid, nesting, and so much more. It’s a good time to step back and understand how these tools fit together in a declarative system – a resilient cascade of styles.

Recent Links

Link post type

5 Questions for Miriam Suzanne

Miriam Suzanne at Frontend Dogma on Jul 15

I talked with Jens Oliver Meiert over at Frontend Dogma about our work here at OddBird, what’s happening in the CSS Working Group, and advice for getting started in frontend development.

see all Link posts
Link post type

CSS @scope

Keep selector conflicts to a minimum

Miriam Suzanne at 12 Days of Web on Dec 15

The new @scope rule is here! It’s a better way to keep our component styles contained – without relying on third-party tools or extreme naming conventions.

see all Link posts
Link post type

Sass Package Importer (Request for Comments)

A new proposal for importing from NPM packages in Sass

James Stuckey Weber at Sass Blog on Sep 26

UI libraries like Vuetify and Bootstrap make it easy to extend their themes by providing Sass source files with their NPM packages. Now, Sass is requesting feedback on a simpler way to import those libraries into your Sass styles with e.g. @use "pkg:bootstrap".

see all Link posts

Featured Workshop

Recent Links

OddNews Sign Up