用 less 链接关键帧属性

Question

所以我正在尝试为 css3 关键帧创建一个 LESS 混合。链接 id 和 classes 的方式通常是这样的：

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

这不是什么新鲜事，也没什么大不了的。我现在正在尝试的是创建以下 mixin

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

以下：

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

现在的问题是：为什么我不能这样做：

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

非常感谢任何帮助！谢谢！

Answer 1

更新了 LESS 1.7+ 答案

现在可以将其简化为以下内容（因为现在可以将规则集设置为变量和用于@keyframes 的变量名称[尽管我可以说还没有用于扩展]）：

@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);

原始（LESS 1.7 之前）答案

我认为你不能按照你想要的方式去做的原因有两个。 1) LESS 在正确处理@ 规则时存在一些问题，因为它使用@ 符号作为变量； 2) 我注意到keyframes 和动画的专有 CSS 在与其他专有 CSS 混合时有时效果不佳。修改a complicated previous answer I gave with keyframes，我能够生成一些代码，使其在 LESS 方面保持一定的紧凑性，但仍然完全扩展了 CSS 输出的功能。

它使用一些技巧（我在上一个答案中链接到）来组合字符串和变量以获得输出。它的一些部分对我来说仍然是一个谜，它实际上是如何工作的，但它似乎编译正确。

少

.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 输出

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