更少的CSS将mixin作为参数传递给另一个mixin

有没有办法将一个mixin或样式的声明作为输入参数传递给另一个mixin

让我们看一个具有动画关键帧的示例。以下是我们如何在纯CSS中定义关键帧：

@-moz-keyframes some-name
{
    from { color: red; }
    to { color: blue; }
}

@-webkit-keyframes some-name
{
    from { color: red; }
    to { color: blue; }
}

@keyframes some-name
{
    from { color: red; }
    to { color: blue; }
}

我们的想法是使用mixin简化这些声明，这样我们就可以有如下内容：

.keyframes(name, from, to)
{
    // here we need somehow to reproduce structure
    // that we have in an example above
}

// define one animation
.my-from() { color: red; }
.my-to() { color: blue; }
// the following won't work because you cannot pass mixin as a parameter
// in way I have here, so I am looking for a way to solve this problem
.keyframes('some-name', .my-from, .my-to);

// define another animation
.another-from() { font-size: 1em; }
.another-to() { font-size: 2em; }
.keyframes('another-name', .another-from, .another-to);

系统将具有不同的模块，这些模块可以动态连接到应用程序，也可以删除。所以，不要建议我使用

@import

，因为事实并非如此。输出CSS是动态编译的，使用有关模块和它们自己的LESS样式的信息，以及mixins库等无基依赖项

---

注意：如果您知道一种传递类定义而不是mixin的方法，那么它将对我有用。在上面的一个例子中，它将是

.my-from

而不是

.my-from（）

等等。

这并不是使用mixin的方式

你应该按照以下思路做一些事情：

.mixin-one { ... }
.mixin-two { ... }
.target-style {
    .mixin-one;
    .mixin-two;
    font-family: 'Comic Sans MS';
    color: magenta;
}

更新后的版本少于1.7.0+（更简单） 现在，我们可以通过1.7.0更新和使用的能力更直接地实现这一点

现在我们真的可以通过规则集通过参数传递mixin，或者我们可以传递属性stings本身。所以考虑一下：

更少（使用1.7）

。关键帧（@name、@from、@to）{
@框架：{
from{@from（）；}
到{@to（）；}
};
@pre:-moz关键帧；
@-moz关键帧@name
{
@框架（）；
}
@-webkit关键帧@name
{
@框架（）；
}
@关键帧@name
{
@框架（）；
}
}
.keyframes（testName，{color:red；.myMix（0）；}，{color:blue；.myMix（1）；}）；
.myMix（@value）{opacity:@value；}

请注意，我正在传递属性设置和mixin调用，我的输出是：

CSS输出

@-moz关键帧testName{
从{
颜色：红色；
不透明度：0；
}
到{
颜色：蓝色；
不透明度：1；
}
}
@-webkit关键帧testName{
从{
颜色：红色；
不透明度：0；
}
到{
颜色：蓝色；
不透明度：1；
}
}
@关键帧testName{
从{
颜色：红色；
不透明度：0；
}
到{
颜色：蓝色；
不透明度：1；
}
}

注意规则集是如何传递的，在括号中

{…}

，然后通过

@from（）

和

@to（）

（看起来很像一个mixin调用）。我使用这些传递的规则集设置另一个

@frames

规则集，然后调用该规则集本身来填充关键帧定义

更一般地说

在这里，我将一个私有mixin传递给另一个mixin，然后从另一个mixin调用它：

更少

.someMixin（@class；@expectedMixin）{
.@{class}{
@expectedMixin（）；
.myPrivateMix（0.6）；
试验：1；
}
}
.someMixin（newClass；{.myClass；}）；
.myClass{
.myPrivateMix（@value）{opacity:@value；}
}

CSS输出

.newClass{
不透明度：0.6；
试验：1；
}

---

保留以下内容以获取遗留信息。

更新（增加了1.4.0+支持） 哇，这花了一些时间，但我想我有一些你可以用的东西。然而，它确实需要在模块中对mixin进行一些特殊的定义，特别是使用。所以

首先，定义模块混合 请注意，打算在特定的未来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 对于您的

@关键帧

示例，这非常困难。事实上，对于帮助我解决应用

@name

的问题至关重要，因为它遵循

@keyframes

定义，所以在正常的LESS规则下不适用。应用

@name

的解决方案看起来很糟糕，但它确实有效。不幸的是，它确实需要定义一个选择器字符串来播放动画（因为它使用该字符串来帮助构建关键帧的最后一个

}

）。此命名限制仅适用于以

@

开头的css字符串，如

@关键帧

，可能还有

@媒体

此外，因为我们在模块文件中使用了一个标准的mixin名称，所以我们可以在新的mixin中一致地访问该名称，同时传入一个变量，通过模式匹配来选择该mixin的适当变体。因此，我们得到：

小于1.3.3或小于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上的模式匹配传递直接模式（都是无点[.]和无引号），但不要忘记，您还需要一个选择器字符串（带引号）以使mixin正常工作：

.keyframes('.changeColor', some-name, my-from, my-to);
.keyframes('.changeFontSize', another-name, another-from, another-to);

这将为您提供所需的输出

@-moz为某些名称设置关键帧{
从{
颜色：红色；
}
到{
颜色：蓝色；
}
}
@-webkit为某些名称设置关键帧{
从{
颜色：红色；
}
到{
颜色：蓝色；
}
}
@-o-为某个名称设置关键帧{
从{
颜色：红色；
}
到{
颜色：蓝色；
}
}
@-ms为某个名称设置关键帧{
从{
颜色：红色；
}
到{
颜色：蓝色；
}
}
@为某个名称设置关键帧{
从{
颜色：红色；
}
到{
颜色：蓝色；
}
}
.换颜色{
-moz动画：一些名字；
-webkit动画：一些名字；
-o-动画：一些名字；
-微软动画：一些名字；
动画：一些名字；
}
@-moz为另一个名称设置关键帧{
从{
字号：1em；
}
到{
字号：2em；
}
}
@-webkit为另一个名称设置关键帧{
从{
字号：1em；
}
到{
字号：2em；
}
}
@-o-为另一个名称设置关键帧{
F
.keyframes(@name, @from, @to) {
    @newline: `"\n"`;
    .Local(@x){};
    .Local(@x) when (@x="") {(~"}@{newline}/*"){a:a}/**/};

    .setVendor(@pre, @vendor) {
        (~"@{pre}@@{vendor}keyframes @{name} {@{newline}from") {
            .from(@from);
        }
        to {
            .to(@to);
        }
        .Local(@vendor);
    }
    .setVendor(""            , "-webkit-");
    .setVendor(~"}@{newline}",    "-moz-");
    .setVendor(~"}@{newline}",      "-o-");
    .setVendor(~"}@{newline}",         "");
}

.animation(...) {
  -webkit-animation: @arguments;
     -moz-animation: @arguments;
       -o-animation: @arguments;
          animation: @arguments;
}

.from(a1-from){ width: 10px; }
.to(a1-to) { width: 20px; }
.keyframes(a1-animation, a1-from, a1-to);


.selector {
    // some other css
    .animation(a1-animation 1s infinite linear);
}

@-webkit-keyframes a1-animation {
from {
  width: 10px;
}
to {
  width: 20px;
}
}
@-moz-keyframes a1-animation {
from {
  width: 10px;
}
to {
  width: 20px;
}
}
@-o-keyframes a1-animation {
from {
  width: 10px;
}
to {
  width: 20px;
}
}
@keyframes a1-animation {
from {
  width: 10px;
}
to {
  width: 20px;
}
}
/* {
  a: a;
}
/**/


.selector {
  // some other css
  -webkit-animation: a1-animation 1s infinite linear;
  -moz-animation: a1-animation 1s infinite linear;
  -o-animation: a1-animation 1s infinite linear;
  animation: a1-animation 1s infinite linear;
}

/* {
  a: a;
}
/**/

// Preparing styles for animation points
.keyframes-item(fadeIn, 0%) {
    opacity: 0;
}
.keyframes-item(fadeIn, 100%) {
    opacity: 1;
}
// Generating keyframes
.keyframes(fadeIn);

// Applying animation to fade-in block in 1.5 seconds
.myBlock {
    .animation(fadeIn 1.5s);
}