地點：懸停在一些元素的選擇器在LESS

Question

結束似乎有什麼看不見我的東西。我希望在CSS是這樣的：

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

我少即是：

.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，重複.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; 
} 

但較少的輸入看上去非常複雜，幾乎只要像預期的css輸出那樣直接進行即可。因此它可能是最好的，只是做...除非你正在使用這個作爲基礎，爲建設一個mixin做各種動畫這種方式，像這樣：

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

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

Answer 2

試試這個：

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

我會說實話，我不知道這是否是做到這一點的最好辦法，但它是當我看到這個問題我想過過的第一個解決方案。但是，我會說，如果我處於你的情況，這可能是我會做的。

Answer 3

您可以使用fade-in作爲父選擇器（因爲&是父級選擇器的佔位符）。

這應該得到你所期望的：

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