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

【问题标题】：Using a LESS variable as a property instead of a value使用 LESS 变量作为属性而不是值
【发布时间】：2014-08-07 19:20:17
【问题描述】：

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

【问题讨论】：

标签： less mixins

【解决方案1】：

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

可以对属性进行插值，例如@{前缀}-属性：值；
— Less.js 1.6.0 changelog

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

@{property}: @response_color;

this great SO answer 中的更多信息。

【讨论】：

【解决方案2】：

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

How to pass a property name as an argument to a mixin in less

【讨论】：

很糟糕，它必须是一个黑客，但很高兴知道它在议程上。在那之前，我可以忍受黑客。非常感谢！