在我看来,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
的位置在输出中不正确。
最佳答案
这是一个棘手的情况,主要是因为它似乎是少即是多的情况。您可以像这样重复 .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);
关于css - 放置 :hover at end for some element's selector in LESS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22744567/