css - 元素动画关键帧的继承

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;}

extend 函数中的 all 关键字将确保 .inherit-shake:hover 获得适用于 的相同属性.摇动:悬停。编译后的 CSS 输出如下所示:

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

使用 extend 函数的另一个好处是它会自动对选择器进行分组(如上面所示的输出)。