简化 LESS Mixins 和参数答案

【问题标题】：Simplify LESS Mixins and Parameters简化 LESS Mixins 和参数
【发布时间】：2016-07-23 23:07:56
【问题描述】：

处理后的 CSS 应该是简洁的吧？

我正在尝试使用<span class="icon-login"> 构建一个按钮图标库

在这个类中，我根据类名为其分配一个 url。我的less code mixin是：

.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

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

【问题讨论】：

对我来说似乎很简洁。或许看看Font Awesome 是怎么做到的？
您是否正在使用循环寻找类似this 的内容？
循环是一种解决方案，但您不会避免在较少的部分中至少声明“分析”、“注销”名称，因为在创建 CSS 时不会读取 HTML。另一种解决方案是使用 javascript，但它看起来有点矫枉过正。
谢谢大家。如果不对其进行硬编码，我似乎无法获得一个干净的选项。哈利可能是最简单的。我很感激！

标签： html css icons less

【解决方案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;
}

谢谢to。

【讨论】：