关键帧在LESS mixin中无法使用LESSHat

Question

以下是我正在尝试生成的标准CSS，但希望使用LESS Mixin来完成此项工作。你可以用纯CSS here

纯CSS

@keyframes rotate { 
    0%{ 
     transform: rotate(0deg); 
    } 

    100% { 
     transform: rotate(180deg); 
    } 
} 

@-webkit-keyframes rotate { 
    0% { 
     -webkit-transform: rotate(0deg); 
    } 

    100% { 
     -webkit-transform: rotate(180deg); 
    } 
} 

@keyframes rotate-fix { 
    0% { 
     transform: rotate(0deg); 
    } 

    100% { 
     transform: rotate(360deg); 
    } 
} 

@-webkit-keyframes rotate-fix { 
    0% { 
     -webkit-transform: rotate(0deg); 
    } 

    100% { 
     -webkit-transform: rotate(360deg); 
    } 
} 

我使用的是相同的混入作为following post（如下所示）检查工作演示。

.keyframes(@name, @frames) { 
    @-webkit-keyframes @name { @frames(); } 
    @-moz-keyframes @name { @frames(); } 
    @-ms-keyframes @name { @frames(); } 
    @-o-keyframes @name { @frames(); } 
    @keyframes @name { @frames(); } 
} 

我使用它是这样的：

.keyframes(rotate, { 
    0%{ 
     .transform(rotate(0)); // This is transform mixin from LESSHat 
    } 

    100%{ 
     .transform(rotate(180)); 
    } 
}); 

.keyframes(rotate-fix, { 
    0%{ 
     .transform(rotate(0)); 
    } 

    100%{ 
     .transform(rotate(360)); 
    } 
}); 

但是，它不工作。按钮的动画不会旋转。代码工作正常时，不包括它作为一个混合。任何人都可以告诉我我在这里错过了什么吗？

生成CSS是这样的：

@-moz-keyframes rotate { 
    ..... 
} 
@-o-keyframes rotate { 
    ..... 
} 
@-webkit-keyframes rotate { 
    0% { 
    -webkit-transform: rotate(0deg); 
    -moz-transform: rotate(0deg); 
    -o-transform: rotate(0deg); 
    -ms-transform: rotate(0deg); 
    transform: rotate(0deg); 
    } 
    100% { 
    -webkit-transform: rotate(180deg); 
    -moz-transform: rotate(180deg); 
    -o-transform: rotate(180deg); 
    -ms-transform: rotate(180deg); 
    transform: rotate(180deg); 
    } 
} 
@keyframes rotate { 
    0% { 
    -webkit-transform: rotate(0deg); 
    -moz-transform: rotate(0deg); 
    -o-transform: rotate(0deg); 
    -ms-transform: rotate(0deg); 
    transform: rotate(0deg); 
    } 
    100% { 
    -webkit-transform: rotate(180deg); 
    -moz-transform: rotate(180deg); 
    -o-transform: rotate(180deg); 
    -ms-transform: rotate(180deg); 
    transform: rotate(180deg); 
    } 
} 

@-moz-keyframes rotate-fix { 
    ..... 
} 
@-o-keyframes rotate-fix { 
    ..... 
} 
@-webkit-keyframes rotate-fix { 
    0% { 
    -webkit-transform: rotate(0deg); 
    -moz-transform: rotate(0deg); 
    -o-transform: rotate(0deg); 
    -ms-transform: rotate(0deg); 
    transform: rotate(0deg); 
    } 
    100% { 
    -webkit-transform: rotate(360deg); 
    -moz-transform: rotate(360deg); 
    -o-transform: rotate(360deg); 
    -ms-transform: rotate(360deg); 
    transform: rotate(360deg); 
    } 
} 
@keyframes rotate-fix { 
    0% { 
    -webkit-transform: rotate(0deg); 
    -moz-transform: rotate(0deg); 
    -o-transform: rotate(0deg); 
    -ms-transform: rotate(0deg); 
    transform: rotate(0deg); 
    } 
    100% { 
    -webkit-transform: rotate(360deg); 
    -moz-transform: rotate(360deg); 
    -o-transform: rotate(360deg); 
    -ms-transform: rotate(360deg); 
    transform: rotate(360deg); 
    } 
} 

Answer 1

一定要插

这样的：

.keyframes(~'<keyframes-name>, <keyframes-definition>') 

，并看看Less Hat docs keyframes section。