LESSCSS - use calculation and return value - css

Question

H i,
Hoping you can help.
Is there a way for LESS to return just a value - feel like I'm missing something very obvious
Say I have:
#unit:em;
#basevalue:1;
Can I use something to give me a shorthand return for -
.someClass { padding: ~'#{basevalue}#{unit}'; }
Like say:
.returnUnit() { ~'#{basevalue}#{unit}'; }
.someClass { padding: returnUnit(); }
because what I'm ultimately hoping for is:
.returnUnit(#val) { #basevalue*#val#{unit}; }
.someClass { padding:returnUnit(0.5); }
Using a mixing I have to define the style property, however the value of this return function would be used for many different css properties.
Hope I made sense and I am just lacking deeper rtfm.
Many Thanks if you can.
Update as #Chococrocs pointer to the docs, thanks.
.average(#x, #y) {
#average: ((#x + #y) / 2);
}
div {
.average(16px, 50px); // "call" the mixin
padding: #average; // use its "return" value
}
Looks like what I need ? - just seeing if I can always tag on the unit variable to it....
Update: That gets part way ...
.unitRelative(#val) {
#value : #basevalue*#val;
#relative: ~'#{value}#{unit}';
}
/* usage */
.someClass {
.unitRelative(2);
padding: #relative;
}
But not when
.someClass {
.unitRelative(2);
padding:#relative;
.unitRelative(3);
margin:#relative;
}
Is there another way ?

Answer 1

LESS has no way as of yet to create a true "function," so we cope with it.
First
You can just use the unit function, like so:
LESS
.someClass { padding: unit(#basevalue, #unit); }
.someOtherClass { padding: unit(#basevalue*0.5, #unit); }
CSS
.someClass {
padding: 1em;
}
.someOtherClass {
padding: 0.5em;
}
Second
The mixins as functions is okay in some situations, but as you discovered, has the limitation of only setting the value once on the first call (and that is assuming a variable of the same name does not exist in that scope already).
LESS (first works right, second doesn't)
.returnUnit(#val:1) {
#return: unit(#basevalue*#val, #unit);
}
.someThirdClass {
.returnUnit(0.4);
padding: #return;
}
.someOoopsClass {
.returnUnit(0.4);
padding: #return;
.returnUnit(0.3);
margin: #return;
}
CSS Output
.someThirdClass {
padding: 0.4em;
}
.someOoopsClass {
padding: 0.4em;
margin: 0.4em; /* Ooops! Not 0.3em! */
}
Third
Limitation of the Second idea can be avoided by a second wrapping, as it isolates the scope for each variable returned by .returnUnit(), like so:
LESS
.someAccurateClass {
& {
.returnUnit(0.4);
padding: #return;
}
& {
.returnUnit(0.3);
margin: #return;
}
}
CSS Output
.someAccurateClass {
padding: 0.4em;
margin: 0.3em; /* Yes! */
}
Fourth
It may be better to merge ideas from the First and Third by adding some global variables and doing this:
LESS
#unit:em;
#basevalue:1;
#val: 1;
#setUnit: unit(#basevalue*#val, #unit);
.someAwesomeClass {
& {
#val: .2;
padding: #setUnit;
}
& {
#val: .1;
margin: #setUnit;
}
}
CSS Output
.someAwesomeClass {
padding: 0.2em;
margin: 0.1em;
}
So here we are using the unit function still as the First idea, but have assigned it to the variable #setUnit, so each time the variable is called, it runs the function. We still isolate our property blocks using the & {} syntax like in the Third solution, but now we just set the #val to what we want and call the #setUnit where we want.

Answer 2

There is a hack that is mentioned here by fabienevain using a global js function. Seems to be good option if you want a function with actual return value.
#fn: ~`fn = function(a) { return a; }`;
#arg: 8px;
p {
font-size: ~`fn("#{arg}")`;
}

Answer 3

I think you look for this, Mixin as a function
http://lesscss.org/features/#mixins-as-functions-feature
Reading your question, I think is what you're wishing, ;D

Answer 4

// mixin
.parseInt(#string) {
#parseInt: unit(#string, );
}
Usage:
.selector {
.parseInt(100px);
width: #parseInt + 10; // px will automatically be appended
}
Result:
.selector {
width: 110px;
}

Answer 5

one of the simplest work around would be to pass the property and the value.
mixin.less
.lighter(#property, #color) {
#{property}: multiply(white, fade(#color, 10%));
}
use.less
.my-class{
.lighter(background-color, #FF0000);
}
Results:
.my-class{
background-color: #fbe8eb;
}