如何在LESS中重构媒体查询包装器？

Question

我们的Web应用程序中有很多悬停状态，我们需要为触摸屏禁用所有悬停状态。因此，我决定将所有悬停状态都包装在这样的媒体查询中：

.my-class {

  border-color: blue;

  @media(hover: hover) {
    &:hover {
      border-color: red;
    }
  }
}

我的问题是，当我们具有LESS的功能时，有没有一种更干净的方式来编写这些媒体查询包装器？将会有很多重复。我希望我们可以创建一个小的注释或类似的东西来代替这些包装器。

Answer 1

我想出了这个解决方案

.hover(@rules) {
  @media(hover: hover) {
    &:hover {
      @rules();
    }
  }
}

示例用法：

.my-class {
  border-color: blue;
  .hover({
    border-color: red;
  });
}