3

我制作了以下两个 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 以进行正确解析？还是我试图做一些不可能的事情？

4

2 回答 2

5

只是快速更新。现在功能在那里：

可以对属性进行插值，例如 @{prefix}-property: value;
— Less.js 1.6.0 更新日志

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

@{property}: @response_color;

这个很棒的 SO 答案中的更多信息。

于 2014-08-07T11:20:17.850 回答
3

此处已回答了一个类似的问题，可能会对您有所帮助。LESS.js 框架中还没有该特定功能，但您可以通过一些小技巧绕过它，如下所述：

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

于 2012-06-29T09:02:15.743 回答