如何为 :hover, : active, :disabled 这样的状态写更少的 mixin？

Question

我是这样写的，但是我得到了

Parse Error: Unrecognised Input

我该如何避免这种情况？

我不想为焦点、活动和禁用状态声明单独的 mixin。

我正在使用 WinLess 在 Windows 7.

上进行编译

这是我的代码

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

感谢任何帮助。

Answer 1

最佳解决方案是将您的 Less.js 编译器 更新到最新版本 (v 2.5.3)，因为它将问题中提供的代码编译为-无需任何修改。

但是，如果您出于某种原因无法升级编译器，那么您将需要一个中间变量来形成伪class 选择器，然后像下面的代码片段一样使用它们：

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

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