When it comes to passing arguments to @keyframes within Less, direct implementation is not supported. However, one workaround is to encapsulate the entire @keyframes rule in a parent mixin, pass the argument to that mixin, and then utilize it within the frames.
.loader(@transform){ /* Parent mixin accepting input parameter */
@keyframes loader {
0% { transform: @transform rotate(0deg); }
100% { transform: @transform rotate(360deg); }
}
}
.loader(translate(0, -50%)); /* Invoking the mixin */
(An initial answer by Curt was provided but has been removed for undisclosed reasons.)
For those curious, generic keyframe mixins can also be defined in Less as demonstrated below.
Sample 1:
.generickeyframe(@name; @from; @to){ /* Accepts name, from frame rules, and to frame rules */
@keyframes @name{
0% { @from(); }
100% { @to(); }
}
}
.generickeyframe(loader; {transform: translate(0,-50%) rotate(0deg)};
{transform: translate(0,-50%) rotate(360deg)});
Sample 2:
.keyframefromto(@name; @from; @to){
@keyframes @name{
0% { transform: @from; }
100% { transform: @to; }
}
}
.keyframefromto(loader; translate(0,-50%) rotate(0deg); translate(0,-50%) rotate(360deg));
In scenarios where multiple frames are needed in the @keyframes rule, array-lists and loops can be employed similar to the following snippet. This mixin requires the animation name, a list of frames (percentage numbers), and properties for each frame (in the form of rulesets) as its parameters.
.generickeyframe(@name; @framelist; @frameprops){
@keyframes @name{
.loop-framelist(@index) when (@index <= length(@framelist)){
@framepos: extract(@framelist, @index) * 1%;
@{framepos}{
@props: extract(@frameprops, @index);
@props();
}
.loop-framelist(@index + 1);
}
.loop-framelist(1);
}
}
.generickeyframe(loader;
0,25,50,75,100;
{transform: translateX(10px);},
{transform: translateX(20px);},
{transform: translateX(50px);},
{transform: translateX(20px);},
{transform: translateX(10px);}
);
Compiled CSS:
@keyframes loader {
0% {transform: translateX(10px);}
25% {transform: translateX(20px);}
50% {transform: translateX(50px);}
75% {transform: translateX(20px);}
100% {transform: translateX(10px);}
}