LESS:LOOP中的关联数组

时间:2015-05-13 07:10:02

标签: for-loop less mixins less-mixins

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

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

显然这个任务导致CSS中有很多重复的代码,所以我想用LESS Loop生成它。

这是我的实际尝试(图标是图标字体):

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

我写了这篇文章,从其他类似的问题中获取灵感,如this

它有效,但我承认这还不是我真正想要的,原因有两个:

  • 我认为由于异构类型,当前需要变量@icons来声明图标实体,而mixins .icons来声明不同的页面类型并不是那么直观。最好能够在两个声明中使用LESS变量,以实现一致性
  • 写一种关联数组肯定会更好,我可以在同一个地方声明页面类型和相对图标之间的对应关系。这样的事情:

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

有什么想法吗?

1 个答案:

答案 0 :(得分:5)

是的,您当然可以在Less中实现关联数组行为,如下所示,Less可以拆分并extract values both based on comma as well as 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)