运行 LESS 只混入一次

Question

我正在尝试确保可能在不同文件中多次调用的 mixin 只输出 css 一次。

先试（少）

我首先想到的是这样的：

混合

@_mod: "false";
.mod(@_mod) when (@_mod = "false") {
    @_mod: "true";

    .mod {
        border-radius: 6px;
        border: 1px solid gray;
    }
}

调用 1

.mod(@_mod);

调用 2

.mod(@_mod);

输出

.mod {
  border-radius: 6px;
  border: 1px solid gray;
}
.mod {
  border-radius: 6px;
  border: 1px solid gray;
}

这是行不通的，因为变量被命名空间和范围限定为 mixin。 Read more

CodePen

第二次尝试（较少）

然后我通过这个:

混合

@_mod: "false";
.mody() {
    .mody {
        border-radius: 6px;
        border: 1px solid gray;
    }
}

调用 1

& when (@_mod = "false") {
    .mody();
}
@_mod: "true";

调用 2

& when (@_mod = "false") {
    .mody();
}
@_mod: "true";

输出

-nothing-

由于 Less 对所有变量的延迟加载“功能”，这不起作用...

CodePen

有谁知道如何确保多次调用的 mixin 只运行一次？

Answer 1

解决方案：使用 default() 并使初始混入暴露另一个空混入（这将抑制默认混入）。

// (using same name for a mixin and a ruleset is a bad idea)

._mod() when (default()) {
    ._mod() {}
    .mod {
        border-radius: 6px;
        border: 1px solid gray;
    }
}

._mod();
._mod();
._mod();
._mod();

运行 LESS 只混入一次

Run LESS mixin only once

less

先试（少）

混合

调用 1

调用 2

输出

第二次尝试（较少）

混合

调用 1

调用 2

输出