Skip to main
Sass logo in black
on top of bright oklch color gradient

Sass Color Spaces (Request for Comments)

A new proposal for color management in Sass

There’s been a lot of exciting work in the CSS color specifications lately, and since the new features are already starting to land in browsers, we’ve been preparing to add support in Sass as well. My proposal for that is published and ready for public feedback!

Read the summary & proposal »

I’m very excited about the new color features starting to roll out in CSS – and similarly excited to make them available (with some extra tooling) in Sass as well. This will allow us to:

I hope to write more about color spaces here at some point, but for now check out the request for comments, or dive straight into the full proposal. If you want to learn more about color spaces in CSS, Bramus Van Damme has a great collection of resources, Chris Lilley & Lea Verou released the handy Color.js library, and all of this is based on CSS Color Level 4 and Level 5.

Safari is the farthest along in terms of browser support for the new color spaces, but this is all part of Interop 2022 – which means every browser is trying to get it done this year. I recommend installing the latest Safari Technology Preview and playing around with it!

I put a lot of work into this proposal, and I’m excited to get feedback. Along the way, I also went down a few rabbit holes. If you’re interested, check out The Gray Areas of HWB Color, or my Codepen experiments with Sass color inversion and interpolation of missing channels.

  1. fragment of an inverted triangle with the cascade --
cascade layers are highlighted below element-attached styles
and above specificity
    Link post type

    A Complete Guide to CSS Cascade Layers

    Cascade layers are a new CSS feature that allows us to define explicit contained layers of specificity, so that we have full control over which styles take priority in a project without relying on specificity hacks or !important. This guide is intended to help you fully understand what cascade…

    see all Link posts
  2. A whole CSS-art cabinet of single-div objects drawn by Lynn Fisher,
from a mirror and skull, to abacus, clock, viewfinder, plants,
snow globe, hot air balloon, and lightsaber.
    Link post type

    Very Extremely Practical CSS Art

    CSS-Tricks asked a number of web builders the same question…

    What is one thing you learned about building websites this year?” I’ve always enjoyed the CSS art people create, but I’ve never ventured into it much myself. I’m familiar with many of the tricks involved, but still find it surprising every time: the way people are able to…

    see all Link posts
  3. Link post type

    Using Custom Property “Stacks” to Tame the Cascade

    Since the inception of CSS in 1994, the cascade and inheritance have defined how we design on the web. Both are powerful features, but as authors we’ve had very little control over how they interact. Selector specificity and source order provide some minimal “layering” control, without a lot of nuance…

    see all Link posts