Control de color con funciones de color Sass

Sass viene con funciones que se pueden aplicar fácilmente a los colores en sus propiedades CSS . Estas funciones, cuando se usan correctamente, pueden ser increíblemente poderosas. Quitan algo de la molestia de elegir y manipular colores. Cuando se usan con variables, pueden acelerar el desarrollo drásticamente.

Comencemos con una variable de creación para el color que vamos a manipular:

$base-color: #AD141E;

Razón por lo que es importante generar un color mediante variable:

  1. Permitirá que los cambios de color sean mucho más fluidos y fáciles
  2. Ayuda en recordar un color a la hora de desarrollar evitando recordar el valor hexagesimal

Oscurecer y aclarar

Estas dos funciones ajustan la luminisodad de los valores HSL del color. Sass analizará nuestra variable de color hexadecimal a hsl, luego hará los ajustes. Los llamas en el color con un valor de porcentaje entre 0 y 100. Por lo general, me mantengo en el rango de 3-20%.

darken( $base-color, 10% )
lighten( $base-color, 10% )

Saturar y desaturar

Estas funciones ajustarán la Saturación de los valores de los colores HSL, al igual que oscurecer y aclarar ajustaron la Luminosidad. Nuevamente, debe dar un valor porcentual para saturar y desaturar.

saturate( $base-color, 20% )
desaturate( $base-color, 20% )

Ajustar tono

Esto ajusta el valor de matiz de HSL de la misma manera que todos los demás. Nuevamente, se necesita un valor porcentual para el cambio.

adjust-hue( $base-color, 20% )

Agregar transparencia alfa

Usando nuestro color hexadecimal podemos hacer algunas cosas para que sea un poco transparente. Podemos llamar a hsla, rgba, opacidad y transparencia. Todos ellos logran lo mismo, solo que de diferentes maneras. Prefiero rgba, ya que es más natural para mí, que toma un color y un valor de 0 a 1 para el alfa.

rgba( $base-color, .7 )

Tinte y Sombra

Mezcla un color con un valor de blanco (tinte) y negro (sombra) y son similares a Oscurecer y Aclarar. Toman el color y un valor de% para el cambio.

tint( $base-color, 10% )
shade( $base-color, 10% )