简化LESS Mixin和参数

Question

经过处理的CSS应该简洁吗？

我正在尝试使用<span class="icon-login">

在该类中，我根据类名称为其分配一个url。 我更少的代码混合是：

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

@url参数获取我资产中的图标名称。 但是，为了使用此mixin，我需要创建实例的LOADS。

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

这似乎是在浪费时间。 有什么办法可以简化这个过程？ 因为我希望每个课程都有一个紧凑的小“图标分配器”。 谢谢！

Answer 1

遍历数组将对您有所帮助。

减：

.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;
}

多亏了 。