Search code examples
cssanimationinheritancelessless-mixins

Inheritance of animation keyframes of element

I've got an element .shake and when it's :hover an animation starts. I need to inherit the shake element properties and its animation :hover effect.

I've got

.inherit-shake {
   .shake;
}

It doesn't work because .inherit-shake just inherits the primary .shake properties but its :hover animation.

Is there a way to do that using Less?

Solution

  • If the rules for .shake and .shake:hover were written like in the below snippet then your current code should work as-is.

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

    However, I think they are written like below and that is the reason why the :hover rules don't get applied to .inherit-shape selector.

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

    The best solution would be to use the model mentioned in the first snippet. However, if you can't change the source mixin's for whatever reason then the best would be to make use of extend function with all keyword like in the below snippet:

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

    The all keyword within extend function would make sure that .inherit-shake:hover gets the same properties as applicable for .shake:hover. The compiled CSS output would be like below:

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

    Added advantage of using extend function is that it would automatically group selectors (like in the output shown above).