After extensive searching, I have yet to find a mixin that can create prefixed keyframes declarations without requiring messy fixes.
In my quest, I have crafted the following mixin:
.keyframes(@identifier, @animation) {
.frames { content: ~"'';} @-webkit-keyframes @{identifier} {@{animation}} @-moz-keyframes @{identifier} {@{animation}} @-ms-keyframes @{identifier} {@{animation}} @-o-keyframes @{identifier} {@{animation}} @keyframes @{identifier} {@{animation}"}
}
To use it:
.keyframes(fade-in, ~"0% { opacity: 0; }50% { opacity: 0; }100% { opacity: 1; }");
This approach feels cumbersome and creates an unnecessary rule (.frames { content: '' };) every time the .keyframes() mixin is called.
Is there a cleaner way to achieve this?
Sidenote:
When I run npm info less --version, it shows 1.4.28. Not sure if that's relevant.