较少CSS传递mixin作为另一个mixin的参数

时间:2012-07-18 22:28:21

标签: css arguments less mixins css-animations

有没有办法将一个mixin或style的声明传递给另一个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; }
}

想法是使用mixins简化这些声明,因此我们可以使用以下内容:

.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的基本依赖项(如mixins库等)动态编译。

注意:如果你知道一种传递类定义而不是mixin的方法,它对我有用。在上面的示例中,它将是.my-from而不是.my-from()等等。

4 个答案:

答案 0 :(得分:24)

更新为1.7.0+( WAY 更简单)

我们现在可以更直接地使用1.7.0更新和create rulesets的能力以及使用variables in setting @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()@to()调用(看起来很像混音调用)。我正在使用这些传递的规则集来设置另一个@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+支持)

哇,这需要一些,但我想我有一些你可以使用的东西。但是,它确实需要在模块中对mixin进行一些特殊定义,特别是使用pattern matching。所以......

首先,定义模块混合

请注意,用于特定未来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中通过模式匹配访问单个.from() mixin组,使其可以随意访问。

接下来,定义您的Mixin

对于您的@keyframes示例,这非常困难。事实上,a stack overflow answer对于帮助我解决应用@name的问题至关重要,@keyframes因为它遵循@name定义而不适用于正常的LESS规则。应用}的解决方案看起来很讨厌,但它确实有效。它确实有一个非常不幸的必要,即定义一个选择器字符串来播放动画(因为它使用该字符串来帮助构建关键帧的最后@)。这种命名限制仅适用于以@keyframes开头的css字符串,例如@media,可能还有// 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, ""); }

此外,因为我们的模块文件中使用了标准的mixin名称,所以我们可以在新的mixin中一致地访问它,同时传入变量以选择正确的变体通过模式匹配混合。所以我们得到:

少于1.3.3或

.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,         "");
}

LESS 1.4.0 +

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

现在打电话给你的Mixin

你可以给它自己的名字,然后传递直接模式(所有没有点[。]和没有引号)模块上的模式匹配mixins,但不要忘记你还需要一个选择器字符串(引用它)来使mixin正常工作:

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

为您提供所需的输出

{{1}}

答案 1 :(得分:1)

简化

我只是简化了一点ScottS的方式,将 @keframes -animation 区分开来:

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

但它应该不是问题 - &gt;我们所有人都推动CSS文件通过任何缩小评论的缩小器。

答案 2 :(得分:1)

您还可以使用我的解决方案生成CSS关键帧:https://github.com/thybzi/keyframes

功能

  • 跨浏览器关键帧生成(Firefox 5 +,Chrome 3 +,Safari 4 +,Opera 12 +,IE 10 +)
  • 每个keyframes规则中最多16个时间点(如果需要,可以轻松扩充该数量)
  • Mixins,变量和函数可用于样式时间点
  • 关键帧与animation规则分开创建,因此:
    • 多个animation规则可以使用具有不同值的相同关键帧进行计时,重复等,
    • 可以在同一animation规则
    • 中使用多个动画
    • 动画可以在任何父选择器
    • 中应用(不创建!)
  • 轻巧且(几乎)整洁的LESS代码

基本用法:

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

答案 3 :(得分:0)

你真的不怎么使用mixins。

你应该采取以下措施:

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