Как реорганизовать оболочки медиа-запросов в 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;
  });
}