使用LESS变量作为属性而不是值

Question

我制作了以下两个Mixins：

.responsive_color(@color, @response_color, @speed: 0.1s){
     color:                  @color;
    .transition(color, @speed);

    &:hover, &:active, &:focus{
        color:                  @response_color;
    }
}

.responsive_background(@color, @response_color, @speed: 0.1s){
    background-color:       @color;
    .transition(background-color, @speed);

    &:hover, &:active, &:focus{
        background-color:       @response_color;
    }
}

由于这两个几乎是相同的，所以我想将它们组合成如下形式：

.responsive(@property, @color, @response_color, @speed: 0.1s){
    @property:              @color;
    .transition(@property, @speed);

    &:hover, &:active, &:focus{
        @property:                  @response_color;
    }
}

虽然这不会在LESS解析器（PHP类）中引起错误，但将其忽略。我也尝试过@ {property}和'@ {property}'，但两者都会导致错误。

有谁知道我如何输出@property进行正确解析？还是我试图做一些不可能的事情？

Answer 1

只是快速更新。现在该功能已存在：

可以插入属性，例如@ {prefix} -property：value;
— Less.js 1.6.0更新日志

因此，如果您使用的是Less 1.6或更高版本，现在您可以像这样：

@{property}: @response_color;

更多有关此出色答案的信息。