css - 放置 :hover at end for some element's selector in LESS

Question

在我看来，LESS 中似乎有一些看不见的东西。我希望在 CSS 中有这样的东西:

.animate.fade-in, .animate-hover.fade-in:hover {
  animation-name: fade-in;
}

我的 LESS 是:

.animate, .animate-hover:hover {
  &.fade-in {
    animation-name: fade-in;
  }
}

但我得到的是:

.animate.fade-in, .animate-hover:hover.fade-in {
  animation-name: fade-in;
}

:hover 的位置在输出中不正确。

Answer 1

这是一个棘手的情况，主要是因为它似乎是少即是多的情况。您可以像这样重复 .fade-in，而不是重复 .animate:

少

.animate {
   &.fade-in, &-hover.fade-in:hover {
      animation-name: fade-in;
  }
}

CSS 输出

.animate.fade-in,
.animate-hover.fade-in:hover {
  animation-name: fade-in;
}

但 LESS 输入看起来更复杂，几乎与预期的 css 输出一样长。所以最好只这样做......除非你正在使用这是构建混合以这种方式执行各种动画的基础，如下所示:

.nameAnimation(@name) {
    .animate {
        &.@{name}, &-hover.@{name}:hover {
          animation-name: @name;
      }
    }
}

.nameAnimation(fade-in);
.nameAnimation(fade-out);
.nameAnimation(whaaa);