Less CSS: 我可以在调用另一个 mixin 时将 mixin 作为参数调用吗？

Question

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

我不确定这是否可行。我在这里看到的答案似乎要么是 hack，要么是将变量和字符串作为参数处理。

少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 调用不能 return 任何值。因此，一个 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);
}

Less CSS: 我可以在调用另一个 mixin 时将 mixin 作为参数调用吗？

Less CSS: Can I call a mixin as an argument when calling another mixin?

css

less

less-mixins