How to loop through all params in Less mixin

Question

I'm writing a Less mixin.

I want to be able to pass the mixin several parameters. The first will be a string. The rest, an infinite number of parameters, will be value pairs.

In my mixin how can I loop through the infinite number of parameters?

For example one time I will call...

.my-mixin(@name, @foo: bar, @hello: world);

and another time...

.my-mixin(@name, @iam: cool, @youare: lame, @someoneis: awesome);

Here's what it would look like if Less supported JS/PHP...

.my-mixin() {
    @name: @arguments[0]; //First param

    for (@arguments as @label => @value) {
        @label: @value;
    }
}

Is this possible?

See [Mixing Arguments](http://lesscss.org/features/#mixins-parametric-feature-advanced-arguments-and-the-rest-variable), [Loops](http://lesscss.org/features/#loops-feature), [List Functions](http://lesscss.org/functions/#list-functions) and all the loop examples [**here**](http://stackoverflow.com/search?tab=relevance&q=%5bless%5d%20loop%20.-each) at [**SO**](http://stackoverflow.com/search?tab=newest&q=%5bless%5d%20loop). The rest (i.e. code in the loop body) depends on how you need to render supplied values to CSS. — seven-phases-max, Aug 22 '14 at 07:42
possible duplicate of [Loop over an array of name value pairs in LESS](http://stackoverflow.com/questions/23658087/loop-over-an-array-of-name-value-pairs-in-less) — Bass Jobsen, Oct 08 '14 at 21:57

score 1 · Answer 1 · edited May 23 '17 at 11:57

In fact you ask two questions. First how to create a mixin that can accept an endless number of parameters, and secondly who to iterate over the list / array of parameters.

Less has the special ... syntax to create mixins with an endless number of parameters. The official documentation can be found here: Advanced arguments and the @rest variable. An example / use case can be found at Can I define a LESS mixin to generate a transition-property with a variable number of parameters?.

The special ... syntax can be used to assign the parameter list to a variable by adding the variable name before the ...:

.mixin(@parameter1, @endlesslistofparameters...) {}

The @endlesslistofparameters variable now contains a list of parameters, you can use the Less list functions to extract a value from this list (or find its length): length() returns the length of a list and extract(@list,position) return the value of a certain position in the list. Notice that the first value is on position 1 and not 0.

Finally you can use a loop to iterate over this list of arguments.

In Less a mixin can call itself. Such recursive mixins, when combined with Guard Expressions and Pattern Matching, can be used to create various iterative/loop structures.

See also: Loop over an array of name value pairs in LESS

All together i think you can write something like that shown below:

.my-mixin(@name,@properties...) {
.setproperties(@iterator:1) when (@iterator <= length(@properties)) {
@propertyname: extract(extract(@properties,@iterator),1);
@{propertyname}: extract(extract(@properties,@iterator),2);
.setproperties((@iterator + 1));
}
.@{name} {
.setproperties();
}
}

.my-mixin(jared; iam cool, youare lame, someoneis awesome);

The preceding Less code will compile into the following CSS code:

.jared {
  iam: cool;
  youare: lame;
  someoneis: awesome;
}

And than also notice that Less allows you to Passing Rulesets to Mixins since version 1.7, which enables you to write:

.my-mixin2(@name,@properties) {
.@{name} {
@properties();
}
}
.my-mixin2(jared; {iam: cool; youare: lame; someoneis: awesome;});

How to loop through all params in Less mixin

1 Answers1