SASS proporciona muchos módulos integrados que contienen varias funciones útiles y algunos complementos que facilitan su uso. Todos los módulos incorporados comienzan con sass: para mostrar que son diferentes de otros módulos y que son parte del mismo SASS. Uno de los módulos integrados es el módulo sass:color . Este módulo se utiliza para crear nuevos colores a partir de los existentes. Este módulo tiene una lista de funciones que se pueden usar directamente mientras se codifica con sass:
- color.adjust(): esta función aumenta o disminuye diferentes propiedades del color en una cantidad fija.
Sintaxis:
color.adjust($color,
$red: null, $green: null, $blue: null,
$hue: null, $saturation: null, $lightness: null,
$alpha: null)
adjust-color(...)
La función agrega valores pasados para cada argumento de palabra clave a la propiedad correspondiente del color y devuelve el color ajustado. Lanza un error cuando una propiedad RGB y la propiedad HSL se especifican al mismo tiempo. Cada argumento opcional debe ser un número. Los argumentos RGB deben ser sin unidad y estar entre -255 y 255 (ambos inclusive). El
hue
argumento debe tenerdeg
como unidad o no tener unidad. Los argumentossaturation
ylightness
siempre deben estar entre -100 % y 100 % (ambos inclusive), y pueden no tener unidades. Elalpha
argumento debe ser sin unidad y estar entre -1 y 1 (ambos inclusive).Ejemplo:
@debug color.adjust(
#2cb890
, $green:
20
);
@debug color.adjust(
#35785f
, $red:
-20
, $blue:
30
);
@debug color.adjust(
#21787d
,
$lightness:
-20%
, $alpha:
-0.5
);
Producción:
#2ccc91 #21787d rgba(12, 43, 44, 0.5)
- ajustar-hue(): Esta función aumenta o disminuye el valor de matiz del color.
Sintaxis:
adjust-hue($color, $degrees)
El valor del tono siempre debe ser un número entre -360 grados y 360 grados (ambos inclusive) para agregarlo al tono del color. Puede ser sin unidad.
Ejemplo:
@debug adjust-hue(
#0c2b2c
,
-50
deg);
Producción:
#0c2c12
- color.alpha(): esta función devuelve el canal alfa de un color como un número entre 0 y 1.
Sintaxis:
color.alpha($color)
alpha($color)
opacity($color)
Ejemplo:
@debug color.alpha(
#e1d7d2
);
@debug color.opacity(
rgb
(
210
,
225
,
221
,
0.4
));
@debug alpha(opacity=
20
);
Producción:
1 0.4 alpha(opacity=20)
- color.change(): esta función establece una o más propiedades de un color en nuevos valores de color.
Sintaxis:
color.change($color,
$red: null, $green: null, $blue: null,
$hue: null, $saturation: null, $lightness: null,
$alpha: null)
change-color(...)
La función usa el valor pasado para cada argumento de palabra clave a la propiedad correspondiente del color y luego devuelve el color cambiado. Lanza un error cuando una propiedad RGB y la propiedad HSL se especifican al mismo tiempo. Cada argumento opcional debe ser un número. Los argumentos RGB deben ser sin unidad y estar entre -255 y 255 (ambos inclusive). El
hue
argumento debe tenerdeg
como unidad o no tener unidad. Los argumentossaturation
ylightness
siempre deben estar entre -100 % y 100 % (ambos inclusive), y pueden no tener unidades. Elalpha
argumento debe ser sin unidad y estar entre -1 y 1 (ambos inclusive).Ejemplo:
@debug color.change(
#6b717f
, $red:
100
);
@debug color.change(
#d2e1dd
, $red:
100
, $blue:
50
);
@debug color.change(
#998099
, $lightness:
30%
, $alpha:
0.5
);
Producción:
#64717f #64e132 rgba(85, 68, 85, 0.5)
- color.complement(): Esta función devuelve el complemento RGB del color. Es idéntico a
color.adjust($color, $hue: 180deg)
.Sintaxis:
color.complement($color)
complement($color)
Ejemplo:
@debug color.complement(
#6b717f
);
@debug color.complement(
#d2e1dd
);
@debug color.complement(
#036
);
Producción:
#7f796b #e1d2d6 #663300
- desaturar(): esta función hace que el color esté menos saturado en la cantidad dada.
Sintaxis:
desaturate($color, $amount)
El importe debe ser siempre un número entre 0% y 100% (ambos inclusive). La función disminuye la saturación HSL del color en esa cantidad.
Ejemplo:
@debug desaturate(
#036
,
20%
);
@debug desaturate(
#f2ece4
,
20%
);
Producción:
#0a335c #eeebe8