Question

我试图将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 '.'

我想要实现的目标：我正在尝试使用框边框颜色来匹配其中使用对比度混合的某些元素。

Answer 1

正如评论中所讨论的，Less mixins不是函数，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);
}

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

1 个答案: