元素的动画关键帧的继承

Question

我有一个元素.shake，当它是:hover动画开始时。我需要继承shake元素属性及其动画:hover效果。

我有

.inherit-shake {
   .shake;
}

它不起作用，因为.inherit-shake只是继承了主.shake属性，而是继承了:hover动画。

有没有办法用Less？

来做到这一点

Answer 1

如果.shake和.shake:hover的规则与下面的代码段一样，那么您当前的代码应该按原样运行。

.inherit-shake {.shake;}
.shake{
    a:a;
    &:hover{b:b;}
}

但是，我认为它们的编写如下，这就是:hover规则未应用于.inherit-shape选择器的原因。

.inherit-shake {.shake;}
.shake{a:a;}
.shake:hover{b:b;}

最好的解决方案是使用第一个代码段中提到的模型。但是，如果您因任何原因无法更改源mixin，那么最好使用extend函数和all关键字，如下面的代码段所示：

.inherit-shake {&:extend(.shake all);}
.shake{a:a;}
.shake:hover{b:b;}

all函数中的extend关键字可确保.inherit-shake:hover获得与.shake:hover相同的属性。编译的CSS输出如下所示：

.shake, .inherit-shake {a: a;}
.shake:hover, .inherit-shake:hover {b: b;}

使用extend函数的优势在于它会自动对选择器进行分组（如上面显示的输出中所示）。