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 changelog

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

@{property}: @response_color;

this great SO answer中的更多信息。

Answer 2

这里已经回答了类似的问题，可能会对您有所帮助。那个特殊的功能不在LESS.js框架中（但是），但你可以通过一点点破解来解决它，这里概述：

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

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

2 个答案: