Simplify LESS Mixins and Parameters

Question

Processed CSS is supposed to be succinct right?

I'm trying to build a button icon library using <span class="icon-login">

In this class I assign it a url based upon the class name. My less code mixin is:

.icon-finder(@url){
   background-image: url("..images/icons/backend/@{url}-icon-36.png");
   background-position: center center;
}

The @url parameter fetches the icon name in my assets. However in order to use this mixin I need to create LOADS of instances.

.icon-analytics{
   .icon-finder(analytics);
}
.icon-logout{
   .icon-finder(logout); // Pointing to logout.png
}
etc etc

And this seems like a waste of time. Is there any way I can simplify this process? Because I'd love to have a compact little 'icon assigner' to each class. Thanks!

Seems pretty succinct to me. Maybe look at how [Font Awesome](https://fortawesome.github.io/Font-Awesome) does it? — Steve, Apr 04 '16 at 12:07
Are you looking for something like [this](http://lesscss.org/less-preview/#%7B%22less%22%3A%22%40icons%3A%20analytics%2C%20logout%2C%20login%3B%5Cn.icon-finder(%40index)%20when%20(%40index%20%3E%200)%7B%5Cn%20%20%40icoType%3A%20extract(%40icons%2C%20%40index)%3B%5Cn%20%20.icon-%40%7BicoType%7D%7B%5Cn%20%20%20%20background-image%3A%20url(%5C%22..images%2Ficons%2Fbackend%2F%40%7BicoType%7D-icon-36.png%5C%22)%3B%5Cn%20%20%20%20background-position%3A%20center%20center%3B%5Cn%20%20%7D%5Cn%20%20.icon-finder(%40index%20-%201)%3B%5Cn%7D%5Cn.icon-finder(length(%40icons))%3B%22%7D) using loops? — Harry, Apr 04 '16 at 12:08
Loops are a solution but you won't avoid declaring at least the "analytics", "logout" names in the less parts, as the HTML isn't read at CSS creation. Another solution would be to use javascript but it looks overkill. — Denys Séguret, Apr 04 '16 at 12:09
Thanks all. I couldn't seem to get a clean option without hard coding it. Harry had probably the simplest. I appreciate it! — Jonah M, Apr 04 '16 at 13:08

score 0 · Answer 1 · edited May 23 '17 at 11:45

Loop over an array will helps you.

Less:

.icon-finder(@url){
   background-image: url("..images/icons/backend/@{url}-icon-36.png");
   background-position: center center;
}

@icons: analytics, logout;

.make-icons(@i: length(@icons)) when (@i > 0) {
  .make-icons(@i - 1);

  @icon: extract(@icons, @i); 
    .@{icon} {
        .icon-finder(@icon);
    }
}

.make-icons(); // run the mixin

Css:

.analytics {
  background-image: url("..images/icons/backend/analytics-icon-36.png");
  background-position: center center;
}
.logout {
  background-image: url("..images/icons/backend/logout-icon-36.png");
  background-position: center center;
}

Thanks to.

Simplify LESS Mixins and Parameters

1 Answers1