css - 用 less 链接关键帧属性

Question

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

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