Módulo Sass sass:list

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 incorporados es el módulo sass:list que hace posible acceder y modificar valores en una lista.

Nota: En Sass, cada mapa cuenta como una lista que contiene dos elementos para cada par clave/valor. Por ejemplo, (1: 2, 3: 4) cuenta como (1 2, 3 4). Por lo tanto, todas las funciones discutidas a continuación funcionan tanto para mapas como para listas. Este módulo le permite acceder y modificar listas.

Los siguientes métodos están disponibles en el módulo sass:list :

• list.append(): esta función devuelve una copia de la lista con el valor dado agregado al final.

  Sintaxis:

  list.append($list, $val, $separator: auto) append($list, $val, $separator: auto)

  Si el separador es un comma, la lista devuelta estará separada por comas y lo mismo ocurre con la separación por espacios. En caso de que el separador sea auto(separador predeterminado), la lista devuelta usará el mismo separador que usa la lista (o un espacio si la lista no tiene un separador). No se permite ningún otro valor en el separador. A diferencia de list.join() , si el valor es una lista, se anida dentro de la lista devuelta en lugar de agregar cada elemento a la lista devuelta.

  Ejemplo:

  @debug list.append(10px 20px, 30px);  @debug list.append((geeks, for), geeks);  @debug list.append(10px 20px, 30px 40px);  @debug list.append(10px, 20px, $separator: comma);  @debug list.append((geeks, for), geeks, $separator: space);

  Producción:

  10px 20px 30px
  geeks, for, geeks
  10px 20px (30px 40px)
  10px, 20px
  geeks for geeks
  

• list.index(): Esta función devuelve el índice de un valor en la lista.

  Sintaxis:

  list.index($list, $value) index($list, $value)

  En caso de que el valor no aparezca en la lista, la función devuelve null. Si el valor aparece varias veces en la lista, la función devuelve el índice de la primera aparición del valor.

  Ejemplo:

  @debug list.index(geeks for geeks, geeks);  @debug list.index(geeks for geeks, for);  @debug list.index(geeks for geeks, slash_it);

  Producción:

  1
  2
  null
  

• list.join(): esta función devuelve una nueva lista que tiene los elementos de list1seguidos de los elementos de list2.

  Sintaxis:

  list.join($list1, $list2,      $separator: auto, $bracketed: auto) join($list1, $list2,      $separator: auto, $bracketed: auto)

  Si el separador es comma, la lista devuelta estará separada por comas, y lo mismo ocurre con la separación por espacios. En el caso de auto(separador predeterminado), la lista devuelta usará el mismo separador que usa el list1, si tiene un separador o list2si tiene un separador, o un espacio como separador. No se permite ningún otro valor en el separador. Si entre corchetes se establece en verdadero, la lista devuelta consta de corchetes. De lo contrario, la lista devuelta no tiene corchetes. Si es auto(predeterminado), la lista devuelta estará entre corchetes. No se permiten otros valores.

  Ejemplo:

  @debug list.join(10px 20px, 30px 40px);  @debug list.join((geeks, for), (geeks, gfg));  @debug list.join(10px, 20px);  @debug list.join(10px, 20px, $separator: comma);  @debug list.join((geeks, for),      (geeks, gfg), $separator: space);  @debug list.join([10px], 20px);  @debug list.join(10px, 20px, $bracketed: true);

  Producción:

  10px 20px 30px 40px
  geeks, for, geeks, gfg
  10px 20px
  10px, 20px
  geeks for geeks gfg
  [10px 20px]
  [10px 20px]
  

• list.length(): Esta función devuelve la longitud de la lista.

  Sintaxis:

  list.length($list) length($list)

  Esta función también se puede utilizar para devolver el número de pares en un mapa.

  Ejemplo:

  @debug list.length(geeks); @debug list.length(geeks for geeks); @debug list.length((gfg: geeksforgeeks,              slash_it: Shivam));

  Producción:

  1
  3
  2
  

• list.nth(): Esta función devuelve el elemento de la lista presente en el índice “n”.

  Sintaxis:

  list.nth($list, $n) nth($list, $n)

  Si nes un entero no positivo, esta función cuenta desde el final de la lista. Lanza un error si no hay ningún elemento presente en el índice n.

  Ejemplo:

  @debug list.nth(geeks for geeks, 2); @debug list.nth([geeks for geeks], 3);

  Producción:

  for
  geeks