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

Question

我们的网络应用程序中有很多悬停状态，我们需要禁用触摸屏的所有悬停状态。所以我决定将我们所有的悬停状态包装在这样的媒体查询中:

.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;
  });
}