5 Questions for Miriam Suzanne
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.
Inspect and manipulate the new CSS color formats in Sass!
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.
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:
color.space()
.color.to-space()
.color.to-gamut()
.color.adjust()
or color.channel()
accept a $space
parameter for making adjustments or inspecting
in an arbitrary color space.A workshop on resilient & maintainable CSS
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.
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.
Keep selector conflicts to a minimum
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.
A new proposal for importing from NPM packages in Sass
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"
.