Question

对我来说似乎有一些看不见的东西。我希望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

试试这个：

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

我会说实话，我不确定这是否是最好的方法，但这是我在看到这个问题时想到的第一个解决方案。但是，我会说，如果我在你的情况下，这可能就是我要做的。

Answer 2

您可以使用fade-in作为父选择器来实现这一目标（因为&是父选择器的占位符）。

这应该能达到你的期望：

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

Answer 3

这是一个棘手的情况，主要是因为它似乎是LESS更多的情况。您可以，而不是重复.animate，重复.fade-in，如此：

<强> LESS

.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输出一样直接。所以最好这样做...除非你使用这是建立一个mixin以这种方式做各种动画的基础，如下所示：

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

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

地点：将鼠标悬停在LESS的某个元素选择器的末尾

3 个答案: