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 ?

I'm not sure if it's possible to separate `@unit` and `@basevalue` in LESS. Does it hurt your design to combine them into a single variable? It doesn't seem like you'd lose much by doing that, since any time you change one, you'd need to change the other as well. — recursive, Apr 01 '14 at 18:50
Thanks @recursive. You could be right, can I still multiple say like - `10em * 6` ? - Ive just added an edit too with what looks like the right lines - just trying that now — Rob Sedgwick, Apr 01 '14 at 18:56
I have been combining them like `padding:~'@{baseval}@{unit}'; but it would be neater to be more Dry — Rob Sedgwick, Apr 01 '14 at 18:58
Personally I would suggest one of [these two methods](https://gist.github.com/seven-phases-max/2e51755b5d29005c13ed) (the rest looks extremely bloating for me). — seven-phases-max, Mar 25 '15 at 11:30

score 13 · Accepted Answer · answered Apr 01 '14 at 19:48

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.

that fourth one is ace! Sweet, thanks for the in depth explanation, just what I was looking for. Nice use of the `@val` scoping it up like that. It bends my head how Less uses variables this way :) thanks. — Rob Sedgwick, Apr 01 '14 at 19:59
Goddammit, because of that i just lost over 1 hour at work -.- They really should but the information about "unit" to the polarising section. Even better, they should it add to their feature list first! — Stefan Vilbrandt, Aug 31 '17 at 15:48

score 6 · Answer 2 · edited Mar 25 '15 at 11:09

6

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

edited Mar 25 '15 at 11:09

Rob Sedgwick

5,216
4
20
36

answered Mar 02 '15 at 23:22

xangxiong

596
4
9

ace! Will try that , +1 thanks - ) I've added the code from that link to your answer ) – Rob Sedgwick Mar 25 '15 at 11:09

score 3 · Answer 3 · answered Apr 01 '14 at 18:48

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

answered Apr 01 '14 at 18:48

Federico J.

15,388
6
32
51

Thanks @Chococroc I was reading that page before, added it to the q and having a play .. – Rob Sedgwick Apr 01 '14 at 18:58

score 1 · Answer 4 · answered Mar 19 '16 at 08:28

1

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

Usage:

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

Result:

.selector {
    width: 110px;
}

answered Mar 19 '16 at 08:28

OZZIE

6,609
7
55
59

score 0 · Answer 5 · answered Jun 02 '19 at 08:07

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

LESSCSS - use calculation and return value

Update: That gets part way ...

5 Answers5

First

Second

Third

Fourth

Linked