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

Question

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

.build-logo(ab, 200px);

第一个是我们产品的首字母缩写词字符串，第二个是所需徽标的正方形宽度/高度。我需要的是一组受保护的 mixin 来测试第一个参数的值 - 但这是我对 LESS 的了解不足的地方。

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

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

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

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

Answer 1

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

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

这不是我们想要的。

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

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

Answer 2

尝试不同的方法：

.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;
}