Streamlined approach for LESS 1.7.0+
The latest 1.7.0 update simplifies things significantly by introducing the ability to create rulesets and utilize variables in setting keyframes.
Now, it's possible to pass a mixin through a parameter by a ruleset or directly pass in the property strings themselves. Here's an example:
LESS (using 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;}
In this setup, both a property setting and a mixin call are passed, resulting in this output:
CSS Output
@-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;
}
}
This method showcases passing rulesets enclosed in brackets {...}, which are then called using @from() and @to()(similar to calling a mixin). Additional rule sets like @frames are utilized within the keyframes definitions.
More Generically
This snippet demonstrates passing a private mixin to another mixin and then calling it from that secondary mixin:
LESS
.someMixin(@class; @expectedMixin) {
.@{class} {
@expectedMixin();
.myPrivateMix(0.6);
test: 1;
}
}
.someMixin(newClass; {.myClass;});
.myClass {
.myPrivateMix(@value) {opacity: @value;}
}
CSS Output
.newClass {
opacity: 0.6;
test: 1;
}
Previous version information is retained below.
Detailed guide on utilizing LESS 1.4.0+
An elaborate process is involved, specifically defining mixins with pattern matching, to effectively use them in modules. Here's a breakdown:
Create Module Mixins
Define module-specific animations as shown below:
// 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; }
If individual mixin names are desired, follow this structure:
// 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() }
This setup allows access to the straight mixin .my-from() and enables later mixins to access the singular .from() group via pattern matching.
Define Main Mixin
For the @keyframes scenario, a specific approach is required to ensure accurate application of the animations. The following code blocks illustrate this:
LESS 1.3.3 or under
// define mixin in mixin file
.keyframes(@selector, @name, @from, @to) {
...
LESS 1.4.0+
.keyframes(@selector, @name, @from, @to) {
...
Utilize the Mixin
To incorporate your defined mixin, use the following syntax:
.keyframes('.changeColor', some-name, my-from, my-to);
.keyframes('.changeFontSize', another-name, another-from, another-to);
Observe Desired Output
...