LESS：如何将mixin作为参数传递给另一个mixin？ [英] LESS: How can I pass a mixin as an argument to another mixin?

问题描述

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

I have some basic mixins that apply some rules using media queries

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

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

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

我试图构建一个非常简单的基于flex的网格系统，我试图传递所提到的mixins作为参数，所以我可以有一个通用的。 make-column mixin。如下：

And I'm trying to build a very simple flex-based grid system, I'm trying to pass the mentioned mixins as parameters so I can have a generic .make-column mixin. as follows:

.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 崩溃：

But unfortunately passing @break-point-mixin as a parameter and calling it from inside .make-col crashes with:

code>无法识别的输入。可能缺少打开'（'

Unrecognised input. Possibly missing opening '('

推荐答案

mixin name）我想说你缺少这样的事实，在 .on-small / .on-medium 这些 small 和 medium 的东西也只是参数，因此不应该是mixin名称的一部分。考虑到你的例子变成：

In this particular case (unlike a general case with an arbitrary mixin name) I'd say you're missing the fact that in .on-small/.on-medium these small and medium things are also nothing but parameters and thus should not be a part of the mixin names. With this in mind your example becomes:

.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 - * mixins相同，它们只是一个：

Same for your .grid-col-on-* mixins, they are just a single:

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

等。

如果你真的想要一个灵活的/通用的网格 - 永远不会将硬编码设备/断点名称改成混合或变量名称（更多的理由和例子参见 https://github.com/less/less.js/issues/2702 ）。

If you really want a flexible/generic grid - never hardcode device/breakpoint names into mixin or variable names (for more rationale and examples see https://github.com/less/less.js/issues/2702).

这篇关于LESS：如何将mixin作为参数传递给另一个mixin？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！