how to write less mixin for states like :hover, : active, :disabled?

Question

This is how I wrote it, but I get

Parse Error: Unrecognised Input

How can I circumvent this?

I do not want to declare individual mixin for focus, active and disabled states.

I am using WinLess for compiling on Windows 7.

• WinLess version:1.9.1
• Less.js version:2.1.2

Here is my code

.state(@state,@property,@colour){
    &:@{state}{
        @{property}:@colour;
    }
}

Any help is appreciated.

Answer 1

The best solution to is to update your Less.js compiler to the latest version (v 2.5.3) because it compiles the code provided in the question as-is without the need for any modifications.

However, if you can't upgrade the compiler for whatever reasons then you would need an intermediate variable to form the pseudo-class selectors and then use them like in the below snippet:

.state(@state,@property,@colour){
  @sel: ~":@{state}";
  &@{sel}{
    @{property}:@colour;
  }
}
#demo{
  .state(hover,color,red);
}