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?

score 5 · Answer 1 · edited May 23 '17 at 12:31

5

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.

edited May 23 '17 at 12:31

Community

1
1

answered Aug 07 '14 at 11:20

tomekwi

2,048
2
21
27

score 3 · Accepted Answer · edited May 23 '17 at 12:23

3

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

edited May 23 '17 at 12:23

Community

1
1

answered Jun 29 '12 at 09:02

Matt Gifford

1,268
9
13

To bad that it has to be a hack, but it's good to know that it's on the agenda. Until that time I can live with the hack. Many thanks! – SanderVerkuijlen Jun 29 '12 at 09:11

Using a LESS variable as a property instead of a value

2 Answers2