我需要8种不同的CSS3动画,这些动画太相似了,所以我使用了LESS.下面是代码,它完美地运行,带有一个小故障 - @name变量.

.animation_top (@name, @pxFrom, @pxTo) {
    @-moz-keyframes @name {
        0% {
            top: @pxFrom;
            opacity: 0;
        }
        100% {
            top: @pxTo;
            opacity: 1;
        }
    }

    @-webkit-keyframes @name {
        0% {
            top: @pxFrom;
            opacity: 0;
        }
        100% {
            top: @pxTo;
            opacity: 1;
        }
    }

    @-ms-keyframes @name {
        0% {
            top: @pxFrom;
            opacity: 0;
        }
        100% {
            top: @pxTo;
            opacity: 1;
        }
    }
}

因为css关键帧是由@符号启动的,所以LESS只是忽略@name的变量.有没有办法如何逃脱关键帧@符号或迫使LESS以某种方式正确渲染@name？

合乎逻辑的方式是:

.mymixin() {
  sample_key: samplevalue;
}

@avar:  mymixin;
.@{avar}();

但我得到一个解析错误.

有办法吗？

所以我正在尝试为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% { …

在LESS可以实现这样的目标吗？

.some-button(@className) {
  @className { .actionIcon; }
  tr:hover {
    @className { .actionButton; }
  }
}

我打电话的时候:

.some-button(.edit-action);

预期产量应为:

.edit-action { .actionIcon; }
tr:hover { .edit-action { .actionButton; } }

目前我收到这个"@className {.actionIcon;}中无法识别的输入"错误:

.some-button(@className) {
  @className { .actionIcon; }
  tr:hover {

编辑

我想要实现的另一件事是使用mixin作为mixin参数:

.actionButton(@buttonClassName; @buttonType) {
  @{buttonClassName} { 
    .actionIcon; 
  }
  tr:hover {
    @{buttonClassName} { 
        .actionHoverIcon; 
        @buttonType();
    }
  }
}

和电话是这样的:

.actionButton(~'.row-edit', button-harmful);

其中,纽扣有害是一个mixin.