Convert a mixin that accepts only from & to keyframe selectors to accept multiple keyframe selectors

Question

I have this Less mixin:

.keyframes (@name, @fromRules, @toRules) {
    @-webkit-keyframes ~'@{name}' { from { @fromRules(); } to { @toRules(); } }
            @keyframes ~'@{name}' { from { @fromRules(); } to { @toRules(); } }
}

I call for example:

.keyframes(fade-in,
    {
        opacity: 0;
    },
    {
        opacity: 1;
    }
);

The result is:

@-webkit-keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

But how can I use Less mixins so I can use keyframes-selector different from 0%, 100% and also more than 2 keyframes-selector so result will look like this:

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

Thanks for help.

Just remove the from and to rules from the mixin and pass the entire rule (with all ther percentage splits) as one param to the mixin. — Harry, Sep 25 '14 at 16:33
Or have multiple mixins, 1 for the 2 stage, and another 1 for the 3 stage — Huangism, Sep 25 '14 at 16:34
You can see here a [basic sample](http://codepen.io/hari_shanx/pen/kKqHG). — Harry, Sep 25 '14 at 16:36
Btw., also note that you don't need `~""` stuff there. Just `@name` is an absolutey correct syntax there. — seven-phases-max, Sep 25 '14 at 16:36
Thanks! Yes this is better solution. My was unnecessarily complex. — quarky, Sep 25 '14 at 17:49
@Harry please add your comment as an answer so that it can be accepted. — Bass Jobsen, Oct 04 '14 at 10:58
@quarky: Are you looking for anything extra mate? I hope the answer addressed your question fully. — Harry, Oct 08 '14 at 04:05

Harry · Answer 1 · 2014-10-06T11:24:51.017

You could achieve this by passing the rules for the entire list of keyframe selectors (like 0%, 50%, 100% etc) as a single rule-set to the mixin along with the name of the animation.

Also as mentioned by seven-phases-max in the comments, @-webkit-keyframes ~'@{name}' is not required and it can simply be written as @-webkit-keyframes @name.

.keyframes (@name, @rules) {
    @-webkit-keyframes @name { @rules(); }
            @keyframes @name { @rules(); }
}

div{
    .keyframes(fade-in,
    {
        0% { opacity: 0;}
        50% { opacity: 1;}
        100% { opacity: 0;}
    });
}

CodePen Demo - Click on the eye icon in the CSS box to see the compiled output.

Note:

Passing rulesets to a mixin was introduced in Less v1.7.0 and hence the above code will not work with lower versions.

Convert a mixin that accepts only from & to keyframe selectors to accept multiple keyframe selectors

1 Answers1