mirror of
https://github.com/danog/sass-site.git
synced 2024-12-12 17:37:36 +01:00
68 lines
3.1 KiB
Markdown
68 lines
3.1 KiB
Markdown
---
|
||
title: 'Request for Comments: HWB Functions'
|
||
author: Natalie Weizenbaum
|
||
tags: blog
|
||
#date: 2020-10-06 16:00 PST
|
||
---
|
||
|
||
The CSS working group has been up to all sorts of exciting stuff recently in the
|
||
[Color Level 4] spec, and the Sass team is starting to think about how to
|
||
integrate those cool new features into Sass's color model. We need more time to
|
||
hammer out exactly the right designs for complex features like the Lab color
|
||
space, but that doesn't mean we can't add a few new color goodies.
|
||
|
||
[Color Level 4]: https://www.w3.org/TR/css-color-4/
|
||
|
||
Today we're announcing a proposal for one such feature: built-in Sass functions
|
||
for [HWB] colors! Once this proposal (drafted by Sass core team member [Miriam
|
||
Suzanne]) is accepted and implemented, you'll be able to write colors in HWB
|
||
syntax and adjust their whiteness and blackness the same way you can adjust a
|
||
color's saturation and lightness today.
|
||
|
||
[HWB]: https://www.w3.org/TR/css-color-4/#the-hwb-notation
|
||
[Miriam Suzanne]: https://www.miriamsuzanne.com/
|
||
|
||
## The Functions
|
||
|
||
Here are the new and improved functions this proposal adds:
|
||
|
||
### `color.hwb()`
|
||
|
||
The `color.hwb()` function defines a color using its hue, whiteness, and
|
||
blackness. Like the existing `rgb()` and `hsl()` functions, It can either use
|
||
the space-separated syntax defined in [the spec][HWB] (`hwb(270 20% 40%)`) or
|
||
the more Sass-y comma-separated syntax (`hwb(270, 20%, 40%)`). Because HWB
|
||
colors use the same sRGB colorspace as all other Sass color values, colors
|
||
created this way are fully compatible with all existing Sass color functions and
|
||
will be emitted as their RGB equivalents for maximum browser compatibility.
|
||
|
||
Note that _unlike_ `rgb()` and `hsl()`, the proposal doesn't add this function
|
||
to the global scope yet. This is because Sass has a policy of never adding
|
||
support for new CSS syntax before at least one browser implements it. Specs have
|
||
a tendency to change until they're locked in by browsers, and if Sass ends up
|
||
supporting something different than the browsers themselves that's bad news!
|
||
|
||
### `color.whiteness()` and `color.blackness()`
|
||
|
||
These functions work like the `color.saturation()` and `color.lightness()`
|
||
functions do for HSL colors. They even work for colors that weren't created with
|
||
`color.hwb()`, so you can use them to check how pale or dark any color is.
|
||
|
||
Because HWB colors have the same notion of "hue" as HSL colors, the existing
|
||
`color.hue()` function already works perfectly!
|
||
|
||
### `color.scale()`, `color.adjust()`, and `color.change()`
|
||
|
||
All three color modification functions now support `$whiteness` and `$blackness`
|
||
arguments. If you want a color (again no matter how it was created) to be 20%
|
||
whiter, just pass it to `color.scale($color, $whiteness: 20%)` and there you go!
|
||
|
||
## Let us know what you think!
|
||
|
||
If you’re interested in learning more about this proposal, [read it in full] on
|
||
GitHub. It’s open for comments and revisions for the next month, so if you’d
|
||
like to see something change please [file an issue] and we can discuss it!
|
||
|
||
[read it in full]: https://github.com/sass/sass/tree/main/proposal/color-4-hwb.md
|
||
[file an issue]: https://github.com/sass/sass/issues/new
|