更少的CSS:调用另一个mixin时可以将mixin用作参数吗?

问题描述

我正在尝试将mixin称为另一个mixin中的参数，但是出现语法错误.令人讨厌的mixin调用中没有变量，只有参数.

I'm trying to call a mixin as an argument in another mixin but I get a syntax error. There's no variables in the offending mixin call, just arguments.

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

I'm not sure if this is possible. The answers I've seen on here seem to be either hacks or to be dealing with variables and strings as arguments.

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 '.'

我要实现的目标:我正在尝试使框的边框颜色与其中使用对比混合的某些元素相匹配.

What I am trying to achieve: I am trying to get the box border color to match certain elements inside it that are using the contrast mixin.

推荐答案

如注释中所述，更少的mixin不是函数，mixin调用无法返回任何值.因此，一个混合(或其输出值)不能作为参数传递给另一个混合.

As discussed in comments, Less mixins are not functions and the mixin calls cannot return any value. Because of this, one mixin (or its output value) cannot be passed as an argument to another mixin.

话虽如此，我们仍然可以在mixin中设置变量，在每个需要选择器的块中调用mixin，并使用其中定义的变量. mixin调用有效地将其中定义的变量公开给父范围.

Having said that, we can still set a variable within a mixin, call the mixin within each selector block where it is required and make use of the variable defined within it. The mixin call effectively exposes the variable defined within it to the parent scope.

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

Below is a sample snippet which would call the contrast mixin and assign the calculated value as the text color and border color of the element.

// 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用作参数吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！