for-loop - functions - less npm

MENOS: matriz asociativa en LOOP

Question

Necesito agregar un icono a una página, según su contenido. En otras palabras, si una página contiene una imagen, una galería, un video ... Agregaré un icono que indique su naturaleza.

Para hacer esto, agrego la clase CSS a body etiqueta del body y uso el selector de descendientes para agregar iconos en la posición correcta.

Obviamente, esta tarea da como resultado una gran cantidad de código repetitivo en CSS, por lo que me gustaría generarlo con un LESS Loop .

Aquí mi intento real (los íconos son icon-fonts ):

@icons:"/e926", "/e90e", "/e914";

.icons-loop(@i; @ico) when (@i <= length(@ico)) {

  @page-type:extract(@ico, @i);

  .page-type_@{page-type}
  {
      #icon_container:before
      {
        content: extract(@icons, @i);
      }
  }

  .icons-loop((@i + 1), @ico);
}

.icons(@ico...) {
  .icons-loop(1, @ico);
}

.icons(image, gallery, video);

Escribí esto, inspirándome en otra pregunta similar como esta .

Funciona, pero admito que aún no es lo que realmente me gustaría, por dos razones:

• Creo que la necesidad actual de una variable @icons para declarar entidades de iconos, y una .icons de .icons para declarar diferentes tipos de página no es tan intuitiva, debido a un tipo heterogéneo. Debería ser mejor poder usar la variable LESS en ambas declaraciones, para coherencia
• Podría ser mejor escribir una especie de matriz asociativa , en la que podría declarar en el mismo lugar, la correspondencia entre el tipo de página y el icono relativo. Algo como esto:

@page-type: image, "/e926"; gallery, "/e90e"; video, "/e914";

¿Algunas ideas?

Answer 1

Sí, ciertamente puede lograr el comportamiento de matriz asociativa en Menos, como se muestra a continuación, ya que Less puede dividir y extraer valores tanto en función de la coma como del espacio .

En este caso, separamos varias combinaciones de iconos de página con una coma y luego dentro de cada combo de icono de página, el tipo de página y el valor del icono están separados por espacio.

@page-icon-list: image "/e926", gallery "/e90e", video "/e914"; //the 2D array

.loop(@index) when (@index > 0){
    @page-icon: extract(@page-icon-list, @index); //extract based on comma separator each page-icon combo
    @page-type: extract(@page-icon,1); //first part of the extracted value is the page type
    @icon: extract(@page-icon,2); //second part is the icon
    .page-type_@{page-type}{
      #icon_container:before
      {
        content: @icon;
      }        
    }
    .loop(@index - 1);
}
.loop(length(@page-icon-list)); //pass the length as counter (split based on comma)