HWB, una mordida al futuro de CSS

Se encuentra publicada en la especificación de Color Nivel 4 CSS, 색상에 대한 새로운 기능은 인간의 직관에 따라 달라집니다. HWB 설정(Hue, Whiteness, Blackness). Esta forma de definir colores se asemeja más a lo que vemos en la rueda de un color picker, donde primero elegimos un tono de reference y a partir de este nos movemos hacia el negro o el blanco, hasta lograr el color deseado.



Parece ser que, desde el equipment de Sass, están barajando la posibilidad de introducir su propia version, como parte del modulo color , lo que nos permitirá empezar a utilizar por adelantado una feature del futuro, creada respetando los specs de CSS4 , sumándole todas las ventajas de estar trabajando con este potente superset de CSS. Esta decisión de no incluirla en el scope global va en sintonía con la filosofía de Sass de nunca incorporar una sintáxis CSS que aún no esté soportada por todos los navegadores modernos. En los casos de rgb() , hsl() , y sus 변형 rgba() Y hsla() , estas pueden invocarse desde el ambito global ya que cuentan con un soporte total.

Entonces, ¿cómo será implementada? 베아모슬로...

hwb()

Al igual que el método hsl() , recibe tres argumentos obligatorios:

Un número (de 0 a 360) que expressa en grados la posición del tono en la rueda de color.

Un número (0% - 100%), expresado en porcentaje, definiendo la cantidad de blanco.

un número (0% - 100%), expresado en porcentaje, definiendo la cantidad de negro.

...y un cuarto parmámetro opcional, siendo este un número de 0 a 1 (acceptando decimales, obviamente) que equivalente al valor de $alfa , es decir, la opacidad, donde 0 (cero) es transparencia total y 1 (uno) opacidad total; su valor por defto es 1.

Los parametros los podemos pasar separados por comas o espacios, como sucede con rgb() Y hsl() .

@use "sass:color";

selector {
    background: color.hwb(270, 20%, 40%); // esto es válido
    background: color.hwb(270 20% 40%); // esto también
}

Sin embargo, si queremos pasarle el cuarto parametro (valor de alfa), deberemos sí o sí separarlos con coma, de lo contrario veremos un error en el compilador. Esta función compila a rgb() en el CSS 결과.

백색도() y 흑도()

Funcionan igual que saturation() Y lightness() si estuviésemos usando el modelo hsl , es decir que: recibiendo cualquier color CSS válido retornará su valor de blanco o negro, permitiendo recuperarlo. También forman parte del modulo color .

스케일(), 조정() 및 변경()

Las funciones que modifican el color de manera directa, ahora además soportan $whiteness Y $blackness como argumentos. Podremos, por ejemplo, hacer lo siguiente: color.adjust(#d2e1dd, $blackness: 30%) ; 이구알 퀘 $saturation Y $lightness , aceptan valores 부정.

Esta nueva característica es, de momento, una propuesta que podría volverse realidad y cualquiera puede sumarse a la discusión 아포르탄도 아이디어. ¿Qué opinás de esta nueva 기능?

현실화:

Recientemente, esta propuesta fue aceptada como podemos ver en este commit así que podemos empezar a utilizar esta feature a partir de la última 버전, la 1.29.