LESSCSS - use calculation and return value

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;
}