为 LESS 1.7.0+ 更新（方式更简单）
我们现在可以通过 1.7.0 更新和create rulesets 的功能更直接地做到这一点，并使用variables in setting @keyframes。
现在我们真的可以通过规则集的参数传递一个 mixin，或者我们可以传递属性 stings 本身。所以考虑一下：
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 调用它：
少
.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 进行一些特殊定义，特别是使用 pattern matching。所以……
首先，定义你的模块 Mixins
请注意，打算在特定的未来 mixin 中使用的模块 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 中可变地访问，这些 mixin 通过模式匹配访问单个 .from() mixin 组。
接下来，定义你的 Mixin
对于您的 @keyframes 示例，这非常困难。事实上，a stack overflow answer 对帮助我解决应用 @name 的问题至关重要，因为它遵循 @keyframes 定义，所以它不适用于正常的 LESS 规则。应用@name 的解决方案看起来很糟糕，但它确实有效。不幸的是，它确实需要定义一个选择器字符串来播放动画（因为它使用该字符串来帮助构建关键帧的最后一个}）。此命名限制仅适用于以 @ 开头的 css 字符串，例如 @keyframes 和可能是 @media。
此外，因为我们在模块文件中使用了标准的 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, "");
}
LESS 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
你可以给它你自己的名字，然后直接传递模块上的模式匹配（都是 no 点 [.] 和 no 引号） mixin，但不要忘记，您还需要一个选择器字符串（被引用）才能使 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;
}