Question

我有一个mixin接受两个参数：

.build-logo(ab, 200px);

第一个是我们其中一个产品的首字母缩写词，第二个是所需徽标的方形宽度/高度。我需要的是一组受保护的mixins，它们可以测试第一个参数的值 - 但是这里我对LESS的了解不足。

我认为它需要是这样的，但我无法理解语法：

.set-logo-colors() when (@acronym = 'ab') {
    @first-color: red;
    @second-color: green;
    @third-color: blue;
}

然后上面声明的3个颜色变量需要在前面提到的.build-logo() mixin中可用。

欢迎任何帮助，提示或建议。谢谢！

Answer 1

尝试不同的方法：

.build-logo(@acronym, @width) when (@acronym = 'ab') {
    background-color: red;
}
.build-logo(@acronym, @width) when (@acronym = 'cd') {
    background-color: blue;
}
.build-logo(@acronym, @width) {
    background-color: green;
}

Answer 2

您可以编写参数特定的mixins而不是使用警卫，例如：

.set-logo-colors(ab) {
    @first-color: red;
    @second-color: green;
    @third-color: blue;
}
.set-logo-colors(bc) {
    @first-color: orange;
    @second-color: blue;
    @third-color: gray;
}

将在您传递正确的参数时执行。

要详细说明这种方法，你可以做一些事情：

.logo(@product) {
    .set-logo-colors(@product);
    .build-logo(@product, 200px);
}

让我们说build-logo看起来像这样

.build-logo(@a, @b) {
    product: @a;
    width: @b;
    color: @first-color;
}

致电

.logo(ac);

你得到：

product: ab;
width: 200px;
color: #ff0000;

不止一种产品：

如果您调用多个产品，则会出现问题，颜色变量已经设置并且

.logo(bc);

将返回：

product: bc;
width: 200px;
color: #ff0000;

这不是我们想要的。

所以最好从一组多参数mixins 开始：

.build-logo(@a, @b, @color1, @color2, @colo3) {
    product: @a;
    width: @b;
    color: @color1;
}

.logo(ab, @size) {
    .build-logo (ab, @size, red, green, blue);
}

.logo(bc, @size) {
    .build-logo (bc, @size, green, orange, gray);
}

现在正在呼叫

.logo(ab, 200px);

给出与上面相同的输出，但在为另一个产品调用时不会重叠/覆盖任何内容。所以：

.logo(bc,200px);

返回：

product: bc;
width: 200px;
color: #008000;

LESS - 根据另一个变量的值设置3个变量

2 个答案:

不止一种产品：