It could be more simple if you don't not need those defaults, but well:
@import "for";
.transition(@args...) when (default()) {
.for(@args); .-each(@value) {
.transition(@value);
}
}
.transition(@value) {
transition+: @property @duration @delay @timing;
@n: length(@value);
.-(); .-() {
@property: extract(@value, 1);
@duration: extract(@value, 2);
@delay: extract(@value, 3);
@timing: extract(@value, 4);
}
.-() when (@n < 2) {@duration: .4s}
.-() when (@n < 3) {@delay: 0s}
.-() when (@n < 4) {@timing: cubic-bezier(.16, .53, .15, .99)}
}
Where imported "for"
utility can be found here.
And for vendor prefixes use autoprefixer.
Alt. imp. just in case, an alternative implementation almost similar to above but using another approach to apply "default" values:
@import "for";
.transition(@args...) when (default()) {
.for(@args); .-each(@value) {
.transition(@value);
}
}
.transition(@value) {
@n: length(@value);
& {transition+ : extract(@value, 1)}
& when (@n > 1) {transition+_: extract(@value, 2)}
& when (@n < 2) {transition+_: .4s}
& when (@n > 2) {transition+_: extract(@value, 3)}
& when (@n < 3) {transition+_: 0s}
& when (@n > 3) {transition+_: extract(@value, 4)}
& when (@n < 4) {transition+_: cubic-bezier(.16, .53, .15, .99)}
}