为LESS 1.7.0+ 更新（更简单）
我们现在可以通过 1.7.0 更新和创建规则集以及在设置中使用变量@keyframes的能力更直接地做到这一点。
现在我们真的可以通过规则集的参数传递一个mixin，或者我们可以传递属性stings本身。所以考虑一下：
少（使用 1.7）
.keyframes(@name, @from, @to) {
@frames: {
from { @from(); }
to { @to(); }
};
@pre: -moz-keyframes;
@-moz-keyframes @name
{
@frames();
}
@-webkit-keyframes @name
{
@frames();
}
@keyframes @name
{
@frames();
}
}
.keyframes(testName, {color: red; .myMix(0);}, {color: blue; .myMix(1);});
.myMix(@value) {opacity: @value;}
请注意，我同时传递了一个属性设置和一个 mixin 调用，我的输出是：
CSS 输出
@-moz-keyframes testName {
from {
color: red;
opacity: 0;
}
to {
color: blue;
opacity: 1;
}
}
@-webkit-keyframes testName {
from {
color: red;
opacity: 0;
}
to {
color: blue;
opacity: 1;
}
}
@keyframes testName {
from {
color: red;
opacity: 0;
}
to {
color: blue;
opacity: 1;
}
}
注意规则集是如何在括号中传递的，{...}然后通过@from()and调用@to()（看起来很像 mixin 调用）。我正在使用这些传递的规则集来设置另一个规则集，@frames然后调用该规则集来填充关键帧定义。
更一般地
在这里，我将一个私有 mixin 传递给另一个 mixin，然后从另一个 mixin 调用它：
较少的
.someMixin(@class; @expectedMixin) {
.@{class} {
@expectedMixin();
.myPrivateMix(0.6);
test: 1;
}
}
.someMixin(newClass; {.myClass;});
.myClass {
.myPrivateMix(@value) {opacity: @value;}
}
CSS 输出
.newClass {
opacity: 0.6;
test: 1;
}
保留以下信息以获取旧信息。
更新（添加了 LESS 1.4.0+ 支持）
哇，这需要做一些事情，但我想我有一些你可以使用的东西。但是，它确实需要在模块中对 mixin 进行一些特殊定义，特别是使用模式匹配。所以...
首先，定义你的模块 Mixins
请注意，打算在特定的未来 mixin 中使用的模块 mixin 是如何使用相同的 mixin name定义的，但具有不同的模式名称。这是完成这项工作的关键。
// define one animation in a module
.from(my-from){ color: red; }
.to(my-to) { color: blue; }
// define one animation in another module
.from(another-from){ font-size: 1em; }
.to(another-to) { font-size: 2em; }
如果您还想在模块中使用单独的 mixin 名称，您应该可以这样做：
// define one animation in a module
.my-from(){ color: red; }
.my-to() { color: blue; }
.from(my-from){ .my-from() }
.to(my-to) { .my-to() }
// define one animation in another module
.another-from(){ font-size: 1em; }
.another-to() { font-size: 2em; }
.from(another-from){ .another-from() }
.to(another-to) { .another-to() }
这应该允许人们调用直接混合.my-from()，或者使其在以后的混合中可变地访问，这些.from()混合通过模式匹配访问单个混合组。
接下来，定义你的 Mixin
对于您的@keyframes示例，这非常困难。实际上，堆栈溢出答案对于帮助我解决应用 的问题至关重要，@name因为它遵循@keyframes定义，所以在正常的 LESS 规则下不适用。应用@name看起来讨厌的解决方案，但它的工作原理。不幸的是，它确实需要定义一个选择器字符串来播放动画（因为它使用该字符串来帮助构建最后一个}关键帧）。此命名限制仅适用于以@like@keyframes和可能开头的 css 字符串@media。
此外，因为我们在模块文件中使用了标准的 mixin 名称，我们可以在新的 mixin 中一致地访问它，同时传入一个变量以通过模式匹配选择该 mixin的适当变体。所以我们得到：
LESS 1.3.3 或以下
// define mixin in mixin file
.keyframes(@selector, @name, @from, @to) {
@newline: `"\n"`; // Newline
.setVendor(@pre, @post, @vendor) {
(~"@{pre}@@{vendor}keyframes @{name} {@{newline}from") {
.from(@from);
}
to {
.to(@to);
}
.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, "");
}
少 1.4.0+
.keyframes(@selector, @name, @from, @to) {
@newline: `"\n"`; // Newline
.setVendor(@pre, @post, @vendor) {
@frames: ~"@{pre}@@{vendor}keyframes @{name} {@{newline}from";
@{frames} {
.from(@from);
}
to {
.to(@to);
}
.Local(){}
.Local() when (@post=1) {
@animationSector: ~"}@{newline}@{selector}";
@{animationSector} {
-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, "");
}
现在调用你的 Mixin
你可以给它你自己的名字，并且只传递直接模式（都没有点 [.] 也没有引号）来匹配模块 mixins 上的模式，但不要忘记你还需要一个选择器字符串（即引用）以使 mixin 正常工作：
.keyframes('.changeColor', some-name, my-from, my-to);
.keyframes('.changeFontSize', another-name, another-from, another-to);
为您提供所需的输出
@-moz-keyframes some-name {
from {
color: red;
}
to {
color: blue;
}
}
@-webkit-keyframes some-name {
from {
color: red;
}
to {
color: blue;
}
}
@-o-keyframes some-name {
from {
color: red;
}
to {
color: blue;
}
}
@-ms-keyframes some-name {
from {
color: red;
}
to {
color: blue;
}
}
@keyframes some-name {
from {
color: red;
}
to {
color: blue;
}
}
.changeColor {
-moz-animation: some-name;
-webkit-animation: some-name;
-o-animation: some-name;
-ms-animation: some-name;
animation: some-name;
}
@-moz-keyframes another-name {
from {
font-size: 1em;
}
to {
font-size: 2em;
}
}
@-webkit-keyframes another-name {
from {
font-size: 1em;
}
to {
font-size: 2em;
}
}
@-o-keyframes another-name {
from {
font-size: 1em;
}
to {
font-size: 2em;
}
}
@-ms-keyframes another-name {
from {
font-size: 1em;
}
to {
font-size: 2em;
}
}
@keyframes another-name {
from {
font-size: 1em;
}
to {
font-size: 2em;
}
}
.changeFontSize {
-moz-animation: another-name
-webkit-animation: another-name;
-o-animation: another-name;
-ms-animation: another-name;
animation: another-name;
}