Chaining keyframe attributes with less

Question

so I'm trying to create a LESS mixin for css3 keyframes. The way to chain id's and classes is normally like:

#idOne,
#idTwo,
.classOne,
.classTwo {
    ...
}

That's nothing new and no big deal. What I'm trying now is to create the following mixin

#rotate(@deg){
    -webkit-transform: rotate(@deg);
    -moz-transform: rotate(@deg);
    -o-transform: rotate(@deg);
}

for the following:

@-webkit-keyframes wiggle {
  10% { #rotate(14deg); } 
  20% { #rotate(-12deg); }  
  30% { #rotate(10deg); } 
  40% { #rotate(-8deg); }
  50% { #rotate(6deg); }
  60% { #rotate(-4deg); } 
  70% { #rotate(3deg); }  
  80% { #rotate(-2deg); } 
  90% { #rotate(1deg); }  
  100% { #rotate(0deg); } 
}

@-moz-keyframes wiggle {
  10% { #rotate(14deg); }  
  20% { #rotate(-12deg); } 
  30% { #rotate(10deg); }  
  40% { #rotate(-8deg); }
  50% { #rotate(6deg); }
  60% { #rotate(-4deg); }  
  70% { #rotate(3deg); } 
  80% { #rotate(-2deg); }  
  90% { #rotate(1deg); } 
  100% { #rotate(0deg); }
}

@-o-keyframes wiggle {
  10% { #rotate(14deg); }  
  20% { #rotate(-12deg); } 
  30% { #rotate(10deg); }  
  40% { #rotate(-8deg); }
  50% { #rotate(6deg); }
  60% { #rotate(-4deg); }  
  70% { #rotate(3deg); } 
  80% { #rotate(-2deg); }  
  90% { #rotate(1deg); } 
  100% { #rotate(0deg); }  
}

@keyframes wiggle {
  10% { #rotate(14deg); }  
  20% { #rotate(-12deg); } 
  30% { #rotate(10deg); }  
  40% { #rotate(-8deg); }
  50% { #rotate(6deg); }
  60% { #rotate(-4deg); }  
  70% { #rotate(3deg); } 
  80% { #rotate(-2deg); }  
  90% { #rotate(1deg); } 
  100% { #rotate(0deg); }  
}

Now the question: Why can't i just do all this like:

@-webkit-keyframe,
@-moz-keyframes,
@-o-keyframes,
@keyframes {
  10% { #rotate(14deg); } 
  20% { #rotate(-12deg); }  
  30% { #rotate(10deg); } 
  40% { #rotate(-8deg); }
  50% { #rotate(6deg); }
  60% { #rotate(-4deg); } 
  70% { #rotate(3deg); }  
  80% { #rotate(-2deg); } 
  90% { #rotate(1deg); }  
  100% { #rotate(0deg); } 
}

Any help is greatly appreciated! Thank you!

score 8 · Answer 1 · edited May 23 '17 at 12:14

Updated LESS 1.7+ Answer

This can be simplified now to the following (since rulesets can now be set to variables and a variable name used for @keyframes [though not yet for the extensions as best I can tell]):

@myWiggle:   {
  10% { #rotate(14deg); }  
  20% { #rotate(-12deg); } 
  30% { #rotate(10deg); }  
  40% { #rotate(-8deg); }
  50% { #rotate(6deg); }
  60% { #rotate(-4deg); }  
  70% { #rotate(3deg); } 
  80% { #rotate(-2deg); }  
  90% { #rotate(1deg); } 
  100% { #rotate(0deg); }
};

#rotate(@deg){
    @{vendor}transform: rotate(@deg);
}

#doKeyFrames(@name; @frames) {
    @-webkit-keyframes @name {
      @vendor: -webkit-;
      @frames(); 
    }
    @-moz-keyframes @name {
      @vendor: -moz-;
      @frames(); 
    }
    @-o-keyframes @name {
      @vendor: -o-;
      @frames(); 
    } 
    @keyframes @name {
      @vendor: ~'';
      @frames(); 
    }
}

#doKeyFrames(wiggle; @myWiggle);

Original (pre-LESS 1.7) Answer

The reason you cannot do it the way you want is twofold I think. 1) LESS has some issues dealing properly with the @ rules since it uses the @ sign for variables; 2) I've noticed that the proprietary CSS for keyframes and animation sometimes doesn't play nice when mixed with other proprietary CSS. Modifying a complicated previous answer I gave with keyframes, I was able to produce some code that keeps it somewhat compact on the LESS side, though still fully expanded in function for the CSS output.

It uses some tricks (which I link to in the previous answer) to combine strings and variables to get the output. There are a few parts of it that are still a bit of a mystery to me in how it actually works, but it does seem to compile right.

LESS

.rotate(@percent, @vendor, @deg) {
   @rotation: ~"rotate(@{deg}deg)";
   //define vendor patterns
   .makeVendor("-moz-") {
     (@percent) {-moz-transform: @rotation;}
    }
   .makeVendor("-webkit-") {
     (@percent) {-webkit-transform: @rotation;}
    }
   .makeVendor("-o-") {
     (@percent) {-o-transform: @rotation;}
    }
   .makeVendor("-ms-") {
     (@percent) {-ms-transform: @rotation;}
    }
   .makeVendor("") {
     (@percent) {transform: @rotation;}
    }
    //call vendor specific string
    .makeVendor(@vendor);

}

// define keyframe mixin

.keyframes(@selector, @name) {
    @newline: `"\n"`; // Newline
    .setVendor(@pre, @post, @vendor) {
        (~"@{pre}@@{vendor}keyframes @{name} {@{newline}"){
         .rotate(10%, @vendor, 14);  
}
         .rotate(20%, @vendor, -12);
         .rotate(30%, @vendor, 10);
         .rotate(40%, @vendor, -8);
         .rotate(50%, @vendor, 6);
         .rotate(60%, @vendor, -4);
         .rotate(70%, @vendor, 3);
         .rotate(80%, @vendor, -2);
         .rotate(90%, @vendor, 1);
         .rotate(100%, @vendor, 0);  

       .Local(){}
       .Local() when (@post=1) {
           (~"}@{newline}@{selector}") {
              -moz-animation: @name;
              -webkit-animation: @name;
              -o-animation: @name;
              -ms-animation: @name;
              animation: @name;
           } 
       }    
       .Local;
    } 
    .setVendor(""            , 0,    "-moz-");
    .setVendor(~"}@{newline}", 0, "-webkit-");
    .setVendor(~"}@{newline}", 0,      "-o-");
    .setVendor(~"}@{newline}", 0,     "-ms-");
    .setVendor(~"}@{newline}", 1,         "");
}

CSS Output

@-moz-keyframes wiggle {
 10% {
  -moz-transform: rotate(14deg);
}
20% {
  -moz-transform: rotate(-12deg);
}
30% {
  -moz-transform: rotate(10deg);
}
40% {
  -moz-transform: rotate(-8deg);
}
50% {
  -moz-transform: rotate(6deg);
}
60% {
  -moz-transform: rotate(-4deg);
}
70% {
  -moz-transform: rotate(3deg);
}
80% {
  -moz-transform: rotate(-2deg);
}
90% {
  -moz-transform: rotate(1deg);
}
100% {
  -moz-transform: rotate(0deg);
}
}
@-webkit-keyframes wiggle {
 10% {
  -webkit-transform: rotate(14deg);
}
20% {
  -webkit-transform: rotate(-12deg);
}
30% {
  -webkit-transform: rotate(10deg);
}
40% {
  -webkit-transform: rotate(-8deg);
}
50% {
  -webkit-transform: rotate(6deg);
}
60% {
  -webkit-transform: rotate(-4deg);
}
70% {
  -webkit-transform: rotate(3deg);
}
80% {
  -webkit-transform: rotate(-2deg);
}
90% {
  -webkit-transform: rotate(1deg);
}
100% {
  -webkit-transform: rotate(0deg);
}
}
@-o-keyframes wiggle {
 10% {
  -o-transform: rotate(14deg);
}
20% {
  -o-transform: rotate(-12deg);
}
30% {
  -o-transform: rotate(10deg);
}
40% {
  -o-transform: rotate(-8deg);
}
50% {
  -o-transform: rotate(6deg);
}
60% {
  -o-transform: rotate(-4deg);
}
70% {
  -o-transform: rotate(3deg);
}
80% {
  -o-transform: rotate(-2deg);
}
90% {
  -o-transform: rotate(1deg);
}
100% {
  -o-transform: rotate(0deg);
}
}
@-ms-keyframes wiggle {
 10% {
  -ms-transform: rotate(14deg);
}
20% {
  -ms-transform: rotate(-12deg);
}
30% {
  -ms-transform: rotate(10deg);
}
40% {
  -ms-transform: rotate(-8deg);
}
50% {
  -ms-transform: rotate(6deg);
}
60% {
  -ms-transform: rotate(-4deg);
}
70% {
  -ms-transform: rotate(3deg);
}
80% {
  -ms-transform: rotate(-2deg);
}
90% {
  -ms-transform: rotate(1deg);
}
100% {
  -ms-transform: rotate(0deg);
}
}
@keyframes wiggle {
 10% {
  transform: rotate(14deg);
}
20% {
  transform: rotate(-12deg);
}
30% {
  transform: rotate(10deg);
}
40% {
  transform: rotate(-8deg);
}
50% {
  transform: rotate(6deg);
}
60% {
  transform: rotate(-4deg);
}
70% {
  transform: rotate(3deg);
}
80% {
  transform: rotate(-2deg);
}
90% {
  transform: rotate(1deg);
}
100% {
  transform: rotate(0deg);
}
}
.myWiggleClass {
  -moz-animation: wiggle;
  -webkit-animation: wiggle;
  -o-animation: wiggle;
  -ms-animation: wiggle;
  animation: wiggle;
}

Chaining keyframe attributes with less

1 Answers1

Updated LESS 1.7+ Answer

Original (pre-LESS 1.7) Answer