更少的 CSS：我可以在调用另一个 mixin 时调用一个 mixin 作为参数吗？答案

【问题标题】：Less CSS: Can I call a mixin as an argument when calling another mixin?更少的 CSS：我可以在调用另一个 mixin 时调用一个 mixin 作为参数吗？
【发布时间】：2015-09-24 16:50:07
【问题描述】：

我试图在另一个 mixin 中调用一个 mixin 作为参数，但我得到一个语法错误。有问题的 mixin 调用中没有变量，只有参数。

我不确定这是否可能。我在这里看到的答案似乎是 hacks 或将变量和字符串作为参数处理。

更少的 CSS

// color variables for user's color
@userColor: #13acae;
@darkUser: hsl(hue(@userColor), saturation(@userColor), lightness(tint(@userColor, 30%)));
@lightUser: hsl(hue(@userColor), saturation(@userColor), lightness(shade(@userColor, 30%)));

// color mixin to alter user's color using Less 'darken' and 'contrast' functions
.contrastColorDark(@percent) { color: darken(contrast(@userColor, @darkUser, @lightUser), @percent); }

// border mixin
.border(@width, @color) { border: @width solid @color; }

// CSS rule using both mixins
.thing {
    .border(1px, .contrastColorDark(10%));
}

错误（.contrastColorDark(10%) 之前的点）

SyntaxError: expected ')' got '.'

我想要实现的目标：我试图让框边框颜色与其中使用对比度混合的某些元素相匹配。

【问题讨论】：

不，你不能这样做。 less mixin 不是函数，它们不返回任何值。
但也许有一种不同的方式可以得到你需要的东西。你能告诉我实际的问题和预期的输出吗？例如，您仍然可以调用 mixin，然后将其输出值作为参数传递（语法稍有不同）。
这绝对是我想要的：框边框颜色以匹配其中使用对比度混合的某些元素。
见functionsplugin。
@Harry 谢谢你，这是一个很好的解释。我已经接受了。

标签： css less less-mixins

【解决方案1】：

正如 cmets 中所讨论的，Less mixin 不是函数，mixin 调用不能返回任何值。因此，一个 mixin（或其输出值）不能作为参数传递给另一个 mixin。

话虽如此，我们仍然可以在 mixin 中设置一个变量，在需要它的每个选择器块中调用 mixin，并使用其中定义的变量。 mixin 调用有效地将其中定义的变量暴露给父作用域。

下面是一个示例 sn-p，它将调用对比度混合并将计算的值分配为元素的文本颜色和边框颜色。

// color variables for user's color
@userColor: #13acae;
@darkUser: hsl(hue(@userColor), saturation(@userColor), lightness(tint(@userColor, 30%)));
@lightUser: hsl(hue(@userColor), saturation(@userColor), lightness(shade(@userColor, 30%)));

// color mixin to alter user's color using Less 'darken' and 'contrast' functions
.contrastColorDark(@percent) { 
    @color: darken(contrast(@userColor, @darkUser, @lightUser), @percent); 
    //color: darken(contrast(@userColor, @darkUser, @lightUser), @percent);  
 }

// border mixin
.border(@width, @color) { 
    border: @width solid @color; 
}

// CSS rule using both mixins
.thing {
    .contrastColorDark(10%);
    color: @color;
    .border(1px, @color);
}

.thing2 {
    .contrastColorDark(50%);
    color: @color;
    .border(1px, @color);
}

【讨论】：