css - element动画关键帧的继承

Question

我有一个元素.shake，当它:hover是动画时。我需要继承抖动元素属性及其动画: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是它会自动对选择器进行分组（如上面显示的输出）。