如何将属性名作为参数传递给less中的mixin

Question

我想做一个函数/混合，它会使颜色变暗，如果它已经是暗的，但当它是亮的时候更亮(规格化/极致？)

是否可以通过传递属性名称(颜色、背景颜色、右边框颜色等)来完成此操作？

.normalize(@color, @amount, @prop: "color") when (lightness(@color) >= 50%)
{
    @prop:lighten(@color, @amount);
}
.normalize(@color, @amount, @prop: "color") when (lightness(@color) < 50%)
{
    @prop:darken(@color, @amount);
}

Answer 1

这目前是less.js github上的功能请求。因此，请注意less.js 1.4中的它。在那之前，你可以像这样破解它...

.mixin(@prop, @value) {
    Ignore: ~"a;@{prop}:@{value}";
}

不是很好，你会得到一个额外的属性，但这是目前唯一的方法。

Answer 2

受保护的Mixins应该是您正在寻找的，但是您不能使用变量来定义属性，只能使用它们的值。所以你可以这样做：

.normalize(@color, @amount) when (lightness(@color) >= 50%)
{
    color:lighten(@color, @amount);
}

.normalize(@color, @amount) when (lightness(@color) < 50%)
{
   color:darken(@color, @amount);
}

所以这就是：

.class1 {
    .normalize(#ddd, 10%);
}

将输出以下内容：

.class1 {
  color: #f7f7f7;
}

但您实际上不能将属性名作为变量传递。这是一个不太不幸的限制，虽然我已经看到了像边距方向这样的方法来绕过它，但没有一种方法可以使用变量传递任何ol‘属性。

Answer 3

在Less‘GitHub上的相应issue中，cloudhaed建议了一种解决方法：

.blah ()      { color: black }                 // All blahs
.blah(right)  { padding-right: 20px }          // Right blahs
.blah(left)   { padding-left: 20px }           // Left blahs

@side: left;
.class { .blah(@side) }

输出

.class { color: black; padding-left: 20px;}

也许这样就行了？