html - 简化 LESS 混音和参数

Question

Processed CSS 应该是简洁的吧？

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

在这个类中，我根据类名为其分配了一个 url。我的 less 代码 mixin 是:

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

@url参数获取我 Assets 中的图标名称。然而，为了使用这个 mixin，我需要创建 LOADS 个实例。

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

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

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

谢谢 to .