Módulo Sass sass:color

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 hueargumento debe tener degcomo unidad o no tener unidad. Los argumentos saturationy lightnesssiempre deben estar entre -100 % y 100 % (ambos inclusive), y pueden no tener unidades. El alphaargumento 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, -50deg);

  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 hueargumento debe tener degcomo unidad o no tener unidad. Los argumentos saturationy lightnesssiempre deben estar entre -100 % y 100 % (ambos inclusive), y pueden no tener unidades. El alphaargumento 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