Hemos dividido las funciones de color en Sass en tres partes:
- Establecer funciones de color
- Obtener funciones de color
- Manipular funciones de color:
Sass establecer funciones de color
| Función | Descripción & Ejemplo |
|---|---|
| rgb(red, green, blue) | Establece un color usando el modelo Rojo-Verde-Azul (RGB). Un valor de color RGB se especifica con: rgb (rojo, verde, azul). Cada parámetro define la intensidad de ese color y puede ser un número entero entre 0 y 255, o un valor porcentual (de 0% a 100%).
Ejemplo: |
| rgba(red, green, blue, alpha) | Establece un color usando el modelo Red-Green-Blue-Alpha (RGBA). Los valores de color RGBA son una extensión de los valores de color RGB con un canal alfa, que especifica la opacidad del color. El parámetro alfa es un número entre 0,0 (totalmente transparente) y 1,0 (totalmente opaco).
Ejemplo: |
| hsl(hue, saturation, lightness) | Establece un color utilizando el modelo Tono-Saturación-Luminosidad (HSL) y representa una representación de colores en coordenadas cilíndricas. El tono es un grado en la rueda de colores (de 0 a 360): 0 o 360 es rojo, 120 es verde, 240 es azul. La saturación es un valor porcentual; 0% significa un tono de gris y 100% es el color completo. La ligereza también es un porcentaje; 0% es negro, 100% es blanco.
Ejemplo: |
| hsla(hue, saturation, lightness, alpha) | Establece un color utilizando el modelo Hue-Saturation-Lightness-Alpha (HSLA). Los valores de color HSLA son una extensión de los valores de color HSL con un canal alfa, que especifica la opacidad del color. El parámetro alfa es un número entre 0,0 (totalmente transparente) y 1,0 (totalmente opaco).
Ejemplo: |
| grayscale(color) | Establece un color gris con la misma luminosidad que el color.
Ejemplo: |
| complement(color) | Establece un color que es el color complementario de color.
Ejemplo: |
| invert(color, weight) | Establece un color que es el color inverso o negativo de color. El parámetro de peso es opcional y debe ser un número entre 0 % y 100 %. El valor predeterminado es 100 %.
Ejemplo: |
Sass Obtener funciones de color
| Función | Descripción & Ejemplo |
|---|---|
| red(color) | Devuelve el valor rojo de color como un número entre 0 y 255.
Ejemplo: |
| green(color) | Devuelve el valor verde de color como un número entre 0 y 255.
Ejemplo: |
| blue(color) | Devuelve el valor azul de color como un número entre 0 y 255.
Ejemplo: |
| hue(color) | Devuelve el matiz del color como un número entre 0 grados y 360 grados.
Ejemplo: |
| saturation(color) | Devuelve la saturación de color HSL como un número entre 0 % y 100 %.
Ejemplo: |
| lightness(color) | Devuelve la luminosidad HSL del color como un número entre 0 % y 100 %.
Ejemplo: |
| alpha(color) | Devuelve el canal alfa de color como un número entre 0 y 1.
Ejemplo: |
| opacity(color) | Devuelve el canal alfa de color como un número entre 0 y 1.
Ejemplo: |
Sass manipular funciones de color
| Función | Descripción & Ejemplo |
|---|---|
| mix(color1, color2, weight) | Crea un color que es una mezcla de color1 y color2. El parámetro de peso debe estar entre 0 % y 100 %. Un peso mayor significa que se debe usar más color1. Un peso más pequeño significa que se debe usar más de color2. El valor predeterminado es 50 %. |
| adjust-hue(color, degrees) | Ajusta el tono del color con un grado de -360° a 360°.
Ejemplo: |
| adjust-color(color, red, green, blue, hue, saturation, lightness, alpha) | Ajusta uno o más parámetros en la cantidad especificada. Esta función suma o resta la cantidad especificada al valor de color existente.
Ejemplo: |
| change-color(color, red, green, blue, hue, saturation, lightness, alpha) | Establece uno o más parámetros de un color a nuevos valores.
Ejemplo: |
| scale-color(color, red, green, blue, saturation, lightness, alpha) | Escala uno o más parámetros de color. |
| rgba(color, alpha) | Crea un nuevo color de color con el canal alfa dado.
Ejemplo: |
| lighten(color, amount) | Crea un color de color más claro con una cantidad entre 0% y 100%. El parámetro de cantidad aumenta la luminosidad de HSL en ese porcentaje. |
| darken(color, amount) | Crea un color de color más oscuro con una cantidad entre 0% y 100%. El parámetro de cantidad disminuye la luminosidad de HSL en ese porcentaje. |
| saturate(color, amount) | Crea un color de color más saturado con una cantidad entre 0% y 100%. El parámetro de cantidad aumenta la saturación de HSL en ese porcentaje. |
| desaturate(color, amount) | Crea un color de color menos saturado con una cantidad entre 0% y 100%. El parámetro de cantidad disminuye la saturación de HSL en ese porcentaje. |
| opacify(color, amount) | Crea un color de color más opaco con una cantidad entre 0 y 1. El parámetro de cantidad aumenta el canal alfa en esa cantidad. |
| fade-in(color, amount) | Crea un color de color más opaco con una cantidad entre 0 y 1. El parámetro de cantidad aumenta el canal alfa en esa cantidad. |
| transparentize(color, amount) | Crea un color de color más transparente con una cantidad entre 0 y 1. El parámetro de cantidad reduce el canal alfa en esa cantidad. |
| fade-out(color, amount) | Crea un color de color más transparente con una cantidad entre 0 y 1. El parámetro de cantidad reduce el canal alfa en esa cantidad. |