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

Question

我想制作一个函数/mixin，如果它已经很暗，它会使颜色变暗，但当它变亮时会变亮（标准化/极端化？）

是否可以通过传递属性名称（颜色、背景颜色、边框颜色等）来做到这一点？

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

但是您实际上不能将属性名称作为变量传递。不幸的是，这是 LESS 的一个限制，虽然我已经看到了诸如边距方向之类的解决方法，但没有办法只使用变量传递任何 ol' 属性。

Answer 3

在 Less 的 GitHub 上的相应问题中，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;}

也许这会做？

Answer 4

此功能自 v1.6.0 起添加：

@property: color;

.widget {
  @{property}: #0ee;
  background-@{property}: #999;
}

编译为：

.widget {
  color: #0ee;
  background-color: #999;
}

请参阅http://lesscss.org/features/#variables-feature-properties