1

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

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

更少的 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 '.'

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

4

1 回答 1

2

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

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

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

// 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);
}
于 2015-09-24T18:48:21.360 回答