Released [v3.5.0]({{ less.master.url }}CHANGELOG.md)
Assigning mixin calls to a variable
Mixins can be assigned to a variable to be called as a variable call, or can be used for map lookup.
#theme.dark.navbar {
.colors(light) {
primary: purple;
}
.colors(dark) {
primary: black;
secondary: grey;
}
}
.navbar {
@colors: #theme.dark.navbar.colors(dark);
background: @colors[primary];
border: 1px solid @colors[secondary];
}
This would output:
.navbar {
background: black;
border: 1px solid grey;
}
Variable calls
Entire mixin calls can be aliased and called as variable calls. As in:
#library() {
.colors() {
background: green;
}
}
.box {
@alias: #library.colors();
@alias();
}
Outputs:
.box {
background: green;
}
Note, unlike mixins used in root, mixin calls assigned to variables and called with no arguments always require parentheses. The following is not valid.
#library() {
.colors() {
background: green;
}
}
.box {
@alias: #library.colors;
@alias(); // ERROR: Could not evaluate variable call @alias
}
This is because it's ambiguous if variable is assigned a list of selectors or a mixin call. For example, in Less 3.5+, this variable could be used this way.
.box {
@alias: #library.colors;
@{alias} {
a: b;
}
}
The above would output:
.box #library.colors {
a: b;
}