LESS：LOOP中的关联数组 [英] LESS: associative array in LOOP

问题描述

我需要在页面上添加一个图标，具体取决于其内容。换句话说，如果一个页面包含一个图像，一个画廊，一个视频...我会添加一个图标来说明它的性质。

为此，我添加CSS类到 body 标记并使用后代选择器将图标添加到正确的位置。

很明显，这个任务会导致CSS中有很多重复的代码，所以我想用图标是icon-fonts / em>）：

  @icons：\e926，\e90e，\e914; $ @ b 
 .icons-loop（@i; @ico）when（@i <= length（@ico））{
 
 @ page-type：extract（@ico ， @一世）; 
 $ b $ .page-type _ @ {page-type} 
 {
 #icon_container：在
之前{
 content：extract（@icons，@i） ; 
} 
} 
 
 .icons-loop（（@ i + 1），@ico）; 
 
 
 .icons（@ico ...）{
 .icons-loop（1，@ico）; 
} 
 
 .icons（image，gallery，video）; 
  

我写了这个，从其他类似的问题中获得灵感，比如此。

有效，但我承认还不是我真正想要的，原因有两个：

• 我认为当前需要一个变量 @icons 来声明图标实体，以及一个mixins .icons 声明不同的页面类型不是那么直观，由于类型的不同。在两个声明中使用LESS变量应该更好一致


• 最好编写一种关联数组，其中I可以在同一个地方声明页面类型和相对图标之间的对应关系。像这样：

@ page-type：image，\e926;画廊，\e90e;视频\e914;

有什么想法吗？

解决方法

是的，当然可以实现Less的关联数组行为，如下面的Less分割和同时提取基于逗号和空格的值。

在这种情况下，我们用逗号分隔多个页面图标组合然后在每个页面图标组合中，页面类型和图标值由空格分隔。

$ b

  @ page-icon-list：图片\e926，图库\e90e，视频\e914; // @二维数组
 
 .loop（@index）when（@index> 0）{
 @ page-icon：extract（@ page-icon-list，@index）; //抽取基于逗号分隔符的每个页面图标组合
 @ page-type：extract（@ page-icon，1）; //提取值的第一部分是页面类型
 @icon：extract（@ page-icon，2）; //第二部分是图标
 .page-type _ @ {page-type} {
 #icon_container：在
之前{
 content：@icon; 
} 
} 
 .loop（@index  -  1）; 
} 
 .loop（length（@ page-icon-list））; //将长度作为计数器（基于逗号分割）
  

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 do this, I add CSS class to body tag and use descendant selector to add icons in the proper position.

Obviously this task results in a lot of repeating code in CSS, so I would like to generate it with a LESS Loop.

Here my actual attempt (icons are 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);

I wrote this, taking inspiration from other similar question like this.

It works, but I admit that is not yet what I really would like, for two reasons:

• I think that current need of a variable @icons to declare icon entities, and a mixins .icons to declare different page-type is not so intuitive, due to eterogeneous type. It should be better to be able to use LESS variable in both declarations, for coherency
• Could be surely better to write a sort of associative array, in which I could declare in the same place, correspondance between page-type and relative icon. Something like this:

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

Any ideas?

解决方案

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)

这篇关于LESS：LOOP中的关联数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！