在另一个混合中使用 LESS 中的一个混合

Question

我正在尝试使用一种混合来计算另一个包含我的基本字体样式的基线高度。每次我尝试编译时，都会收到一个错误。

下面是一个示例。

.lineHeight(@sizeValue){
@remValue: @sizeValue;
@pxValue: (@sizeValue * 10);
line-height: ~"@{pxValue}px";
line-height: ~"@{remValue}rem";
}
.baseFont(@weight: normal, @size: 14px, @lineHeight: (.lineHeight(2.1)) {
font-family: @fontFamily;
font-size: @size;
font-weight: @weight;
line-height: @lineHeight;
}

错误是：类型错误： 无法调用未定义的方法"charAt" at getLocation （/Applications/CodeKit.app/Content/Resources/engines/less/lib/less/parser.js：212：34） 在新的 LessError （/Applications/CodeKit.app/Content/Resources/engines/less/lib/less/parser.js：221：19） at Object.toCSS （/Applications/CodeKit.app/Content/Resources/engines/less/lib/less/parser.js：385：31） at/applications/CodeKit.app/Content/Resources/engines/less/bin/lessc：107：28 at/Applications/CodeKit.app/Content/Resources/engines/less/lib/less/parser.js：434：40 at/Applications/CodeKit.app/Content/Resources/engines/less/lib/less/parser.js：94：48 at/Applications/CodeKit.app/Content/Resources/engines/less/lib/less/index.js：116：17 at/Applications/CodeKit.app/Content/Resources/engines/less/lib/less/parser.js：434：40 at/Applications/CodeKit.app/Content/Resources/engines/less/lib/less/parser.js：94：48 at/Applications/CodeKit.app/Content/Resources/engines/less/lib/less/index.js：116：17

Answer 1

从另一个参数列表中调用 mixin 是没有意义的（除了在调用 mixin 之前您有一个额外的(方面）。

这是我对混合继承的尝试，它适用于您的情况，但不是我见过的最优雅的 LESS。重量和大小的默认值也需要在两个地方重复：

.lineHeight(@sizeValue){
    @remValue: @sizeValue;
    @pxValue: (@sizeValue * 10);
    line-height: ~"@{pxValue}px";
    line-height: ~"@{remValue}rem";
}
// Shared by both versions of baseFont, never used directly
.commonBaseFont(@weight, @size) {
    font-family: @fontFamily;
    font-size: @size;
    font-weight: @weight;
}
// baseFont called without lineHeight argument
.baseFont(@weight: normal, @size: 14px){
    .commonBaseFont(@weight, @size);
    .lineHeight(2.1)
}
// baseFont called with lineHeight argument
.baseFont(@weight: normal, @size: 14px, @lineHeight) {
    .commonBaseFont(@weight, @size);
    line-height: @lineHeight;
}