较少的CSS命名约定 - 悬停时的子选择器

Question

在LESS中，您可以按如下方式引用子选择器：

<div class="button">
    <div class="button-text"> Text </div>
</div>

.button {
  &-text {
    color:red;
  }
}

这将输出：

.button .button-text { color:red; }

这是理想的，但是，当使用悬停时，有没有办法为子元素维护相同/相似的语法？目前，这自然不会起作用：

.button {
  &:hover {
    &-text {
      color:red;
    }
  }
}

这将无法正常工作，并按照预期输出

.button:hover .hover-text { }

有没有办法在不定义完整类名的情况下获得预期的悬停结果，在本例中为“.button-text”？

非常感谢任何帮助。

Answer 1

由于父选择器&代表所有父选择器（不仅仅是最近的祖先），因此在悬停下嵌套将始终包含:hover文本。

这条规则：

.button {
  &:hover &-text {
    color:red;
  }
}

将提供结果（lessismore playgroud）：

.button:hover .button-text {
  color: red;
}