Using a LESS variable as a property instead of a value

Question

I've made the following two 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;
    }
}

Since these two are nearly identical I want to combine them into something like this:

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

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

While this doesn't cause errors in the LESS parser (PHP class) it is simply ignored. I've also tried @{property} and '@{property}' but both of these cause errors.

Does anyone know how I can output @property to be properly parsed? Or am I trying to do something that isn't possible?

Answer 1

Just a quick update. Now the feature is there:

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

So if you're using Less 1.6 or later, now you can actually do it like this:

@{property}: @response_color;

More info in this great SO answer.

Answer 2

A similar question has been answered here that may help you. That particular feature isn't in the LESS.js framework (yet), but you can possibly get around it with a little hack, outlined here:

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