---

Question

这是我的LESS声明：

@colorWhite: #FFFFFF;
@colorBlack : #000000;
@opacityNormalFill: 0.2; 
@opacityNormalLabel: 0.75;
.colorWithAlpha(@color, @alpha)
{
   @colorWithAlpha: rgba( red(@color), green(@color), blue(@color), @alpha );
}

如果我同时写下背景颜色和颜色：

.button {
   .colorWithAlpha(@colorBlack, @opacityNormalFill);
   background-color: @colorWithAlpha;
   .colorWithAlpha(@colorWhite, @opacityNormalLabel);
   color: @colorWithAlpha;
}

输出将是：

.button {
   background-color: rgba(0, 0, 0, 0.2);
   color: rgba(0, 0, 0, 0.2);
}

我必须这样写：

.button {
   .colorWithAlpha(@colorBlack, @opacityNormalFill);
   background-color: @colorWithAlpha;
}
.button {
   .colorWithAlpha(@colorWhite, @opacityNormalLabel);
   color: @colorWithAlpha;
}

输出正确：

.button { 
    background-color: rgba(0, 0, 0, 0.2);
}
.button {
    color: rgba(255, 255, 255, 0.75);
}

如何解决？

Answer 1

好的，你的变量@colorWithAlpha仅限于你的函数.colorWithAlpha。如果您尝试使用全局变量，它将修改您的所有代码。您应该传递零件以在函数参数中设置此颜色，如下所示：

@colorWhite: #FFFFFF;
@opacityNormalFill: 0.2; 
@opacityNormalLabel: 0.75;
@colorBlack : #000000;
.colorWithAlpha(@color, @alpha, @property)
{
   @{property} : rgba( red(@color), green(@color), blue(@color), @alpha );
}

当你使用它时：

.button {
    .colorWithAlpha(@colorBlack, @opacityNormalFill, background-color);
    .colorWithAlpha(@colorWhite, @opacityNormalLabel, color);
}

Answer 2

less不设置全局变量。您应该将mixin用作嵌套样式，而不是函数。

像：

.colorWithAlpha(@bgcolor, @color, @alpha)
{
   background-color: rgba( red(@bgcolor), green(@bgcolor), blue(@bgcolor), @alpha );
   color: rgba( red(@color), green(@color), blue(@color), @alpha );
}

然后：

.button {
   .colorWithAlpha(@colorBlack, @colorWhite, @opacityNormalLabel);
}

Answer 3

Docs：

mixin中定义的所有变量都是可见的，可以在调用者的范围内使用（除非调用者使用相同的名称定义自己的变量）。

由于您的第一次.colorWithAlpha扩展确实已在@colorWithAlpha内定义.button变量，因此第二次.colorWithAlpha调用无效。（有关详细信息，请参阅#1892）。

因此，您需要在自己的范围内隔离每个扩展：

.button {
    .colorWithAlpha(@colorBlack, @opacityNormalFill);
    background-color: @colorWithAlpha;
    & { // <- begin new scope
        .colorWithAlpha(@colorWhite, @opacityNormalLabel);
        color: @colorWithAlpha;
    }
}

或者使用@ throrin19答案中建议的解决方案。

---

顺便说一句，要改变颜色不透明度使用fade功能，即你根本不需要这个混合，你的代码片段可以简化为：

@opacityNormalFill:  20%;
@opacityNormalLabel: 75%;

.button {
   background-color: fade(#000, @opacityNormalFill);
   color:            fade(#fff, @opacityNormalLabel);
}

如何写一个LESS表达式？

3 个答案:

---