针对LESS 1.7.0+进行更新（更加简单）
现在，我们可以通过1.7.0版本的更新和创建规则集的功能以及在设置@keyframes时使用变量来更加直接地完成这个过程。
现在，我们真正可以通过规则集通过参数传递mixin，或者直接传递属性字符串。请考虑以下内容：
LESS (使用 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() 和 @to() 调用（看起来很像 Mixin 调用）。我使用这些传递的规则集来设置另一个 @frames 的规则集，然后再调用它来填充关键帧定义。
更通用地说
在这里，我将一个私有的 Mixin 传递给另一个 Mixin，然后从那个另一个 Mixin 中调用它：
LESS
.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+ 的支持）
哇，这确实需要一些工作，但我认为我有一些可以让您使用的东西。然而，它确实需要在模块中特别定义你的 mixins，具体来说就是使用 模式匹配。所以......
首先，定义你的模块 Mixins
请注意，模块 mixins 旨在在特定未来 mixin 中使用，使用了相同的 mixin 名称，但使用了不同的模式名称。这是使这个工作的关键。
// 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() }
这样可以通过调用直接的 mixin .my-from() 或通过模式匹配在稍后的 mixin 中访问单一的 .from() mixin 组，使其可变地访问。
接下来，定义您的Mixin
对于您的 @keyframes 示例，那非常困难。实际上，一个堆栈溢出答案 对我帮助很大，帮助我解决了应用 @name 的问题，由于它遵循 @keyframes 定义，因此在正常的 LESS 规则下不适用。应用 @name 的解决方案看起来很糟糕，但它有效。它确实有一个，可能是不幸的必要性，即还要定义一个选择器字符串来播放动画（因为它使用该字符串来帮助构建 keyframes 的最后一个 }）。这种命名限制只适用于以 @ 开头的 css 字符串，例如 @keyframes 和可能的 @media。
此外，由于我们在模块文件中使用了标准 mixin 名称，因此我们可以在新的 mixin 中始终访问它，同时通过模式匹配传递变量以选择该 mixin 的正确变体。所以我们得到：
LESS 1.3.3 或更低版本
.keyframes(@selector, @name, @from, @to) {
@newline: `"\n"`;
.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, "");
}
LESS 1.4.0+
.keyframes(@selector, @name, @from, @to) {
@newline: `"\n"`;
.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;
}
@color变量和一个@font-size变量，以便在第二个mixin中使用吗？请具体说明，因为Petah的答案是正常使用它们的方式。 - ScottS