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?