LESS CSS通行证混入作为参数传递给另一个混入(LESS CSS Pass mixin as a

有没有办法通过一个混入或风格的声明，另一混入作为输入参数？

让我们来看看动画关键帧的例子。 以下是我们如何定义的纯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; }
}

想法是使用混入简化这些声明，所以我们可以有类似以下内容：

.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以及像混入图书馆等基础LESS相关性的信息动态编译的上飞

注意：它会为我工作，如果你知道一种方法来传递类的定义，而不是混入。 在一个实例中它上面将是.my-from代替.my-from()和等

Answer 1:

更新的LESS 1.7.0+（WAY简单）

我们可以使用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()看起来很像一个混合调用）。 我使用的是这些传递的规则集来设置的另一个规则集@frames ，然后自己称为填补了关键帧定义。

更一般地

在这里，我通过一个私人混入到另一个混入，然后把它与其他的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名定义，但有不同的模式名称。 这是关键，使这项工作。

// 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; }

如果你也想在模块单独混入的名字 ，你应该能够做到这一点：

// 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()通过模式匹配混入组。

接下来，定义您的密新

为了您的@keyframes例如，这是非常困难的。 事实上， 堆栈溢出的答案是帮助我解决问题与应用的重要@name ，这是不是在跟随，因为它偏少规则应用@keyframes定义。 应用该解决方案@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,         "");
}

现在打电话给你的密新

你可以给它自己的名字，只是通过直接模式（全部是没有点[]和不含引号）的模式匹配的模块混入，但不要忘了，你还需要选择字串（报价），以获得混入到工作的权利：

.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;
}

Answer 2:

简单化

我只是简单一点斯科特”的方式，从-动画 separateing @keframes：

.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;
}

小问题：

所以动画现在从@keyframes分开了，但我们必须付出的代价 。 还有一个讨厌的：

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

但它不应该是一个问题 - > propably我们所有的人通过任何类型的minifiers可切割出的评论推动的CSS文件。

Answer 3:

你也可以用我的解决方案，以生成CSS关键帧： https://github.com/thybzi/keyframes

特征：

• 跨浏览器的关键帧生成器（Firefox 5+，铬3+，Safari浏览器4+，歌剧12+，IE 10+）
• 最多在每个时间点16 keyframes规则（和数量可容易地增加，如果需要的话）
• 混入，变量和函数可用于造型的时间点
• 关键帧是从单独创建animation的规则，所以：
  • 多个animation规则可以使用相同的关键帧使用不同的值进行计时，重复等，
  • 多个动画可以相同内使用animation规则
  • 动画可以应用（不是创建！）任何父母选择内
• 轻巧（几乎）整齐更少的代码

基本用法：

// 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);
}

Answer 4:

它不是真正的你将如何使用混入。

你应该做的线沿线的东西：

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

文章来源: LESS CSS Pass mixin as a parameter to another mixin