LESS CSS Pass mixin as a parameter to another mixin

Question

Is there any way to pass one mixin or style's declaration to another mixin as an input parameter?

Let's take a look at an example with animation keyframes. Following is how we define keyframes in pure 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; }
}

Idea is to simplify these declarations using mixins, so we can have something like following:

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

The system will have different modules that could be dynamically attached to application as well as removed. So, don't suggest me to use @import because it's not the case. Output CSS is dynamically compiled on-fly using information about modules and their own LESS styles as well as base LESS dependencies like mixins library and etc.

Note: it will work for me if you know a way to pass class definition instead of mixin. In an example above it would be .my-from instead of .my-from() and etc.

user_3027390 · Answer

You can also use my solution to generate CSS keyframes: https://github.com/thybzi/keyframes

Features:

Cross-browser keyframes generation (Firefox 5+, Chrome 3+, Safari 4+, Opera 12+, IE 10+)
Up to 16 timepoints in each keyframes rule (and the number can be easily augmented, if needed)
Mixins, variables and functions can be used for styling timepoints
Keyframes are created separately from animation rules, so:
- multiple animation rules can use the same keyframe with different values for timing, repeating, etc,
- multiple animations can be used within same animation rule
- animations can be applied (not created!) inside any parent selector
Lightweight and (almost) neat LESS code

Basic usage:

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

LESS CSS Pass mixin as a parameter to another mixin

4 Answers