Question

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

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

构建按钮图标库

在这个课程中，我根据课程名称为其分配了一个网址。我的代码混合更少：

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

感谢to。

简化LESS混合和参数

1 个答案: