如何将属性名称作为参数传递给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

这是目前onlower.js github上的功能请求。所以在更少的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

在相应的问题在较少的'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