简化 LESS Mixins 和参数

Posted 2023-03-15

【中文标题】简化 LESS Mixins 和参数

【英文标题】：Simplify LESS Mixins and Parameters

【发布时间】：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，但它看起来有点矫枉过正。

谢谢大家。如果不对其进行硬编码，我似乎无法获得一个干净的选项。哈利可能是最简单的。我很感激！

【参考方案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。