LESS:循环中的关联数组
LESS: associative array in LOOP
我需要根据页面内容向页面添加图标。换句话说,如果一个页面包含图像、画廊、视频...我将添加一个图标来指示其性质。
为此,我将 CSS class 添加到 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);
我写这篇文章的灵感来自其他类似的问题,例如 。
它有效,但我承认这还不是我真正想要的,原因有二:
- 我认为当前需要一个变量
@icons
来声明图标实体,以及一个 mixins .icons
来声明不同的页面类型不是很直观,因为类型不同。最好能够在两个声明中使用 LESS 变量,以保持一致性
- 写一种关联数组肯定会更好,我可以在其中声明页面类型和相关图标之间的对应关系。像这样:
@page-type: image, "\e926"; gallery, "\e90e"; video, "\e914";
有什么想法吗?
是的,您当然可以在 Less 中实现关联数组行为,如下所示,因为 Less 可以拆分和 extract values both based on comma as well as space。
在这种情况下,我们用逗号分隔多个页面图标组合,然后在每个页面图标组合中,页面类型和图标值由 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)
我需要根据页面内容向页面添加图标。换句话说,如果一个页面包含图像、画廊、视频...我将添加一个图标来指示其性质。
为此,我将 CSS class 添加到 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);
我写这篇文章的灵感来自其他类似的问题,例如
它有效,但我承认这还不是我真正想要的,原因有二:
- 我认为当前需要一个变量
@icons
来声明图标实体,以及一个 mixins.icons
来声明不同的页面类型不是很直观,因为类型不同。最好能够在两个声明中使用 LESS 变量,以保持一致性 - 写一种关联数组肯定会更好,我可以在其中声明页面类型和相关图标之间的对应关系。像这样:
@page-type: image, "\e926"; gallery, "\e90e"; video, "\e914";
有什么想法吗?
是的,您当然可以在 Less 中实现关联数组行为,如下所示,因为 Less 可以拆分和 extract values both based on comma as well as space。
在这种情况下,我们用逗号分隔多个页面图标组合,然后在每个页面图标组合中,页面类型和图标值由 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)