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

Sa

Answer 1

// mixin
.parseInt(@string) {
    @parseInt: unit(@string, );
}

Usage:

.selector {
    .parseInt(100px);
    width: @parseInt + 10; // px will automatically be appended
}

Result:

.selector {
    width: 110px;
}

Answer 2

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 3

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 4

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

Answer 5

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}")`;
}