Customize

Historically CSS has been limited to a single color model (RGB) and gamut (sRGB). Authors have various formats to describe colors in that gamut – using cubic hex notation (#rgb/#rrggbb/#rrggbbaa) and functions rgb()/rgba()``, or cylindrical/polar-angle functions hsl()/hwb()`.

Unfortunately, sRGB is a relatively narrow color gamut, and RGB isn’t a perceptually uniform color-model. Many monitors (and some browsers) now support wider color gamuts (such as the popular display-p3), and there has also been significant progress in developing more perceptually uniform color spaces such as CIE LAB and okLAB.

The CSS Colors level 4 specification describes how CSS authors can access these newer gamuts & formats – with okLAB as the default space for color-mixing. We want to provide support for this in Sass: with server-side tools to manage colors across spaces, and convert colors between spaces where appropriate.

That includes support for all the new CSS functions, along with some additional Sass functions for inspecting and adjusting colors before they reach the browser. This requires rethinking the Sass color module from the ground up.

17 ‘spec’ episodes

2022

| css spec

CSS Cascade 5 (Layers) @ PostCSS Polyfill

Cascade & Inheritance Level 5 defines Cascade Layers – allowing authors to define explicit contained layers of specificity.

| unofficial draft spec

CSS State Toggles [WIP] @ Proposal & Explainer

Declarative controls for presentational state

| css spec

CSS Cascade 5 (Layers) @ Released in Browsers

Cascade & Inheritance Level 5 defines Cascade Layers – allowing authors to define explicit contained layers of specificity.

2021

| css spec

CSS Containment 3 (Container Queries) @ Working Draft

CSS Containment Level 3 defines Container Queries and container-relative units – allowing authors to build more intrinsic responsive components without knowledge of the overall layout.

| css spec

CSS Cascade 6 (Scope) @ Working Draft

Cascade & Inheritance Level 6 defines scoped styles – allowing authors to provide bounded ranges for selector-matching, and give priority to more ‘proximate’ scope origins.

2020

2019