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 
    

Publicación traducida automáticamente

Artículo escrito por Slash_IT y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *