css – Precessor (Less) – @Arguments variable

Question:

Assuming I have the following mixin with following arguments:

.font-style(@size: 1.2em, @style: 100, @leading:1.4em, @color: #efefed)

Now I want to play this mixin passing the arguments I define to a specific class. Ex:

.myClass{ .font-style(2.2em,...) }

Question: If I want to modify only the @Size and @color argument, it would be necessary for me to repeat the default (@arguments) on account of Ex order:

.font-style( @==a -> "mudei valor", @==b "default", @==c "default", @==d -> "mudei valor )

Or do you have a different form that I can use the defaults without repeating them and change what I really need?

Answer:

Yes, when creating your mixin with parameters using the variable "@arguments" you must specify a default value for each of them.

So when calling your mixin you don't need to pass the values ​​in a special order and even omit the defaults. Ex:

Set Mixin

.font-style(@size: 1.2em, @style: 100, @leading:1.4em, @color: #efefed);

Call Mixin

.myClass{ .font-style(2.2em,2.4em) }

Note the omission of other parameters.

Optional parameters (not explicit value) need to be passed when there is a call. Ex:

.font-style(@size: @size, @color: @color);

Sources:
https://github.com/SomMeri/less4j/wiki/Less-Language-Mixins#explicit-parameters https://stackoverflow.com/questions/17116082/less-mixin-with-optional-parameters https://stackoverflow. com/questions/10837085/less-css-with-optional-parameters

Scroll to Top