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

Question

我制作了以下两个 Mixin:

.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

只是一个快速更新。现在功能就在那里:

Properties can be interpolated, e.g. @{prefix}-property: value;
— Less.js 1.6.0 changelog

因此，如果您使用的是 Less 1.6 或更高版本，现在您实际上可以这样做:

@{property}: @response_color;

更多信息请访问 this great SO answer .