Funciones de color de Sass

Sass 函数Funciones de Sass

Las funciones de color de Sass se pueden dividir en tres partes: configuración de color, obtención de color y operaciones de color.

La siguiente tabla enumera las funciones de color de Sass:

Configuración de color de Sass

Función Descripción y ejemplo
rgb(red, green, blue) Crea un color Red-Green-Blue (RGB). Donde R es "red" y significa rojo, G es "green" verde, y B es "blue" azul.

Ejemplo:
rgb(0, 0, 255);
rgba(red, green, blue, alpha) Crea un color basado en los valores de rojo, verde, azul y transparencia.

Ejemplo:
rgba(0, 0, 255, 0.3);
hsl(hue, saturation, lightness) Crea un color mediante los valores de tono (hue), saturación (saturation) y luminosidad (lightness).

Ejemplo:
hsl(120, 100%, 50%); // verde
hsl(120, 100%, 75%); // verde claro
hsl(120, 100%, 25%); // dark green
hsl(120, 60%, 70%); // verde suave
hsla(hue, saturation, lightness, alpha) Crea un color mediante los valores de tono (hue), saturación (saturation), luminosidad (lightness) y transparencia (alpha).

Ejemplo:
hsl(120, 100%, 50%, 0.3); // verde con transparencia
hsl(120, 100%, 75%, 0.3); // verde claro con transparencia
grayscale(color) Convierte un color en gris, equivalente a desaturate( color,100%).

Ejemplo:
grayscale(#7FBFFF);
Resultado: #c6c6c6
complement(color) Devuelve un color complementario, equivalente a adjust-hue($color,180deg).

Ejemplo:
complement(#7FBFFF);
Resultado: #ff7faa
invert(color, weight) Devuelve un color invertido, los valores de rojo, verde y azul se invierten, mientras que la transparencia no cambia.

Ejemplo:
invert(white);
Resultado: black

Obtención de color de Sass

Función Descripción y ejemplo
red(color) Obtiene el valor de rojo de un color (0-255).

Ejemplo:
red(#7FBFFF);
Resultado: 127
red(red);
Resultado: 255
green(color) Obtiene el valor de verde de un color (0-255).

Ejemplo:
green(#7FBFFF);
Resultado: 255
green(blue);
Resultado: 0
blue(color) Obtiene el valor de azul de un color (0-255).

Ejemplo:
blue(#7FBFFF);
Resultado: 212
blue(blue);
Resultado: 255
hue(color) Devuelve el valor de ángulo del color en el espacio de color HSL (0deg - 255deg).

Ejemplo:
hue(#7FBFFF);
Resultado: 160deg
saturation(color) Obtiene el valor de saturación de un color (0% - 100%).

Ejemplo:
saturation(#7FBFFF);
Resultado: 100%
lightness(color) Obtiene el valor de luminosidad de un color (0% - 100%).

Ejemplo:
lightness(#7FBFFF);
Resultado: 74.9%
alpha(color) Returns the alpha channel of color as a number between 0 and 1.

Ejemplo:
alpha(#7FBFFF);
Resultado: 1
opacity(color) Obtiene el valor de transparencia del color (0-1).

Ejemplo:
opacity(rgba(127, 191, 255, 0.5);
Resultado: 0.5

Operaciones de color de Sass

Función Descripción y ejemplo
mix(color1, color2, weight) Mezcla dos colores.weightLos parámetros deben estar entre 0% y 100%. El peso (weight) predeterminado es 50%, lo que indica que el nuevo color toma el 50% del valor de color de color1 y el 50% del de color2. Si weight es 25%, indica que el nuevo color está compuesto por un 25% del valor de color1 y un 75% del de color2.
adjust-hue(color, degrees) Crea un nuevo color cambiando el valor de tono de un color (-360deg - 360deg).

Ejemplo:
adjust-hue(#7FBFFF, 80deg);
Resultado: #8080ff
adjust-color(color, red, green, blue, hue, saturation, lightness, alpha) Esta función puede ajustar uno o más valores de atributo de un color dado, incluidos los parámetros de valores de color RGB y HSL, además del valor del canal alpha. Estos ajustes dependen de los parámetros de palabras clave pasados, los cuales se suman o restan de los valores de color correspondientes del color dado.

Ejemplo:
adjust-color(#7FBFFF, blue: 25);
Resultado:
change-color(color, red, green, blue, hue, saturation, lightness, alpha) Similar a adjust-color de arriba, solo que en esta función los parámetros pasados reemplazan directamente los valores originales, sin realizar ninguna operación.

Ejemplo:
change-color(#7FBFFF, red: 255);
Resultado: #ffffd4
scale-color(color, red, green, blue,  saturation, lightness, alpha) Otra función práctica de ajuste de color. adjust-color simplemente suma o resta los parámetros pasados a los valores de color propios, a veces puede causar desbordamiento del valor acumulado; por supuesto, la función mantendrá el resultado dentro de los umbrales válidos. Mientras que la función scale-color evita esta situación, ya que no hay que preocuparse por el desbordamiento, permitiendo que los parámetros se ajusten eficazmente dentro del rango de umbrales.

Por ejemplo, el valor de luminosidad lightness de un color está entre 0% y 100%. Si se ejecuta scale-color($color, $lightness: 40%), indica que la luminosidad del color tendrá un aumento de (100 - valor original) × 40%.

Otro ejemplo: ejecutar scale-color($color, $lightness: -40%) indica que la luminosidad del color disminuirá en (valor original - 0) × 40%.

Todos los valores de los parámetros pasados deben estar entre 0% y 100%, y los parámetros de RGB y HSL no pueden entrar en conflicto.

scale-color(hsl(120, 70%, 80%), $lightness: 50%) => hsl(120, 70%, 90%)
scale-color(rgb(200, 150, 170), $green: -40%, $blue: 70%) => rgb(200, 90, 229)
scale-color(hsl(200, 70%, 80%), $saturation: -90%, $alpha: -30%) => hsla(200, 7%, 80%, 0.7)
rgba(color, alpha) Crea un color basado en los valores de rojo, verde, azul y transparencia.

Ejemplo:
rgba(#7FBFFF, 30%);
Resultado: rgba(127, 191, 255, 0.3)
lighten(color, amount) Crea un nuevo color aclarando el color mediante el cambio de su valor de luminosidad (0% - 100%).
darken(color, amount) Crea un nuevo color oscureciendo el color mediante el cambio de su valor de luminosidad (0% - 100%).
saturate(color, amount) Aumenta la saturación del color pasado. Equivale a adjust-color( color, saturation: amount).
desaturate(color, amount) Reduce la saturación de un color para producir un nuevo valor de color. De igual manera, el rango de valores de saturación está entre 0% y 100%. Equivale a adjust-color(color, saturation: -amount).
opacify(color, amount) Disminuye la transparencia del color, con valores entre 0 y 1. Equivale a adjust-color(color, alpha: amount).
fade-in(color, amount) Disminuye la transparencia del color, con valores entre 0 y 1. Equivale a adjust-color(color, alpha: amount).
transparentize(color, amount) Aumenta la transparencia del color, con valores entre 0 y 1. Equivale a adjust-color(color, alpha: -amount).
fade-out(color, amount) Aumenta la transparencia del color, con valores entre 0 y 1. Equivale a adjust-color(color, alpha: -amount).

Sass 函数Funciones de Sass

Otras extensiones