LESS: associative array in LOOP

Question

I need to add an icon to a page, depending by its content. In other words, if a page contain an image, a gallery, a video... I\'ll add an icon indicating its nature.

To

Answer 1

Yes, you can certainly achieve the associative array behavior in Less as shown below as Less can split and extract values both based on comma as well as space.

In this case we separate multiple page-icon combinations by a comma and then within each page-icon combo, the page type and icon value are separated by space.

@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)