element动画关键帧的继承

Question

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

我有

.inherit-shake {
   .shake;
}

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

有没有办法使用 Less 做到这一点？

Answer 1

如果.shake 和.shake:hover 的规则像下面的sn-p 那样编写，那么您当前的代码应该可以按原样运行。

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

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

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

---

最好的解决方案是使用第一个 sn-p 中提到的模型。但是，如果您出于某种原因无法更改源 mixin，那么最好使用带有 all 关键字的 extend 函数，如下面的 sn-p 所示：

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

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

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

使用extend 函数的另一个好处是它会自动对选择器进行分组（如上图所示）。