Less mixin and variables

Question

I have the following mixin:

.iconFont(@color: @green, @font-size: 18px){
  color: @color;
  font-size: @font-size;
}

If I want only to change the second variable value, I need to write the first variable default value?

h1{
 .iconFont(@green, 14px);
}

Answer 1

No, there is no need to specify the default value for the first parameter while calling the function. Instead you can just use named parameters feature to explicitly let the compiler know that the value you are passing in the mixin call is for the 2nd parameter.

.sample{
    .iconFont(@font-size:14px);
}

The above Less code when compiled would produce the below output. (Note: I had set the @green as #00ff00.)

.sample {
    color: #00ff00;
    font-size: 14px;
}

---

While using the named parameter feature, even the order in which the parameters are passed does not matter. For example, the same mixin can be called as follows:

.sample2{
    .iconFont(@font-size:24px, @color: #070707);
}

And it would produce the below as output.

.sample2 {
    color: #070707;
    font-size: 24px;
}