css - LESS:如何将一个 mixin 作为参数传递给另一个 mixin？

Question

我有一些基本的 mixin，它们使用媒体查询应用一些规则

.on-small(@rules) {
  @media (@minWidthSmall) { @rules(); }
}

.on-medium(@rules) {
  @media (@minWidthMedium) { @rules(); }
}

// and .on-large, .on-x-large and so on

我正在尝试构建一个非常简单的基于 flex 的网格系统，我正在尝试将提到的 mixin 作为参数传递，这样我就可以拥有一个通用的 .make-column mixin。如下:

.make-col(@break-point-mixin, @span, @size) {
  flex: 1;
  box-sizing: border-box;


  /***********************************************************
  Is the following line possible in LESS somehow?
  ***********************************************************/
  @break-point-mixin({
    width: percentage(@span/@size);
    min-width: percentage(@span/@size);
  });
}

.grid-col-on-small(@span: 1, @size: 1) {
  .make-col(@break-point-mixin: .on-small, @span, @size);
}

.grid-col-on-medium(@span: 1, @size: 1) {
  .make-col(@break-point-mixin: .on-medium, @span, @size);
}

但不幸的是，将 @break-point-mixin 作为参数传递并从 .make-col 内部调用它会崩溃:

无法识别的输入。可能缺少开头 '('

Answer 1

在这种特殊情况下(与具有任意混合名称的一般情况不同)我会说你错过了 .on-small/.on-medium 这些 small 和 medium 也不过是参数，因此不应成为 mixin 名称的一部分。考虑到这一点，您的示例变为:

.on(small, @rules) {
  @media (@minWidthSmall) {@rules();}
}

.on(medium, @rules) {
  @media (@minWidthMedium) {@rules();}
}

.make-col(@device, @span, @size) {
  flex: 1;
  box-sizing: border-box;
  .on(@device, {
    width: percentage(@span/@size);
    min-width: percentage(@span/@size);
  });
}

// usage:

.make-col(small, @span, @size);

您的 .grid-col-on-* 混入也是如此，它们只是一个:

.grid-col-on(@device, @span: 1, @size: 1) {
  .make-col(@device, @span, @size);
}

等等。

如果你真的想要一个灵活/通用的网格 - 永远不要将设备/断点名称硬编码到 mixin 或变量名称中(更多原理和示例参见 https://github.com/less/less.js/issues/2702)。