0

我有一个接受两个参数的 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 中可用。

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

4

2 回答 2

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;
}
于 2013-05-07T15:33:00.230 回答
2

您可以编写特定于参数的 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;

这不是我们想要的。

所以最好从一组多参数 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;
于 2013-05-07T15:34:01.113 回答