Nested interpolation i.e. ~"@{section-row-padding-size-@{size}}"
is not officially supported in Less. (It works in current versions but may stop to work at any moment eventually).
The correct method to achieve what you want is:
.section-row-padding(@size) {
@var-name: "section-row-padding-size-@{size}";
@padding-size: @@var-name;
padding: (@padding-size * 2);
}
or shorter:
.section-row-padding(@size) {
@padding-size: "section-row-padding-size-@{size}";
padding: (@@padding-size * 2);
}
See "variable references" for @@
meaning.
The problem is caused by the
@padding-size
not interpreted as a px unit but rather as a string.
Exactly. Using ~""
is like saying to the compiler "do not interpreter this value, it's just some string with whatever value I want you to pass through". Thus the type of the value returned by ~"@{section-row-padding-size-@{size}}"
in your example is not a number and it can't be used with arithmetic operations (hence: "Operation on an invalid type").
(A few links for "why ~""
should be avoided whenever possible": 1, 2, 3, 4 etc.).