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
– recursive, Commented Apr 1, 2014 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
– Rob Sedgwick, Commented Apr 1, 2014 at 18:56
I have been combining them like `padding:~'@{baseval}@{unit}'; but it would be neater to be more Dry — Rob Sedgwick
– Rob Sedgwick, Commented Apr 1, 2014 at 18:58
Personally I would suggest one of these two methods (the rest looks extremely bloating for me). — seven-phases-max
– seven-phases-max, Commented Mar 25, 2015 at 11:30

ScottS · Accepted Answer · 2014-04-01 19:48:11Z

13

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.

answered Apr 1, 2014 at 19:48

ScottS

72.4k13 gold badges131 silver badges155 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rob Sedgwick Over a year ago

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.

Stefan Vilbrandt Over a year ago

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!

Rob Sedgwick · Accepted Answer · 2015-03-25 11:09:28Z

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, 2015 at 11:09

Rob Sedgwick

5,2364 gold badges22 silver badges36 bronze badges

answered Mar 2, 2015 at 23:22

xangxiong

5965 silver badges9 bronze badges

1 Comment

Rob Sedgwick Over a year ago

ace! Will try that , +1 thanks - ) I've added the code from that link to your answer )

Federico J. · Accepted Answer · 2014-04-01 18:48:26Z

4

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 1, 2014 at 18:48

Federico J.

16k7 gold badges35 silver badges54 bronze badges

1 Comment

Rob Sedgwick Over a year ago

Thanks @Chococroc I was reading that page before, added it to the q and having a play ..

OZZIE · Accepted Answer · 2016-03-19 08:28:35Z

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, 2016 at 8:28

OZZIE

7,49410 gold badges64 silver badges66 bronze badges

Comments

aviram83 · Accepted Answer · 2019-06-02 08:07:19Z

0

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

answered Jun 2, 2019 at 8:07

aviram83

90011 silver badges16 bronze badges

Comments

Nick H · Accepted Answer · 2024-09-17 10:17:18Z

0

This is possible from Less 3.5. You can reach into the result of a mixin call to access individual properties, meaning you can set a return value and fetch it (you can even set multiple return values if you want), and it works as expected for repeated calls.

https://lesscss.org/features/#mixins-feature-mixins-as-functions-feature

.average(@x, @y) {
   @result: ((@x + @y) / 2);
}

  
p {
  av1: .average(3, 5)[@result];
  av2: .average(3, 8)[@result];
}

Output:

p {
  av1: 4;
  av2: 5.5;
}

answered Sep 17, 2024 at 10:17

Nick H

11.5k1 gold badge40 silver badges49 bronze badges

Collectives™ on Stack Overflow

LESSCSS - use calculation and return value

Update: That gets part way ...

6 Answers 6

First

Second

Third

Fourth

2 Comments

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Update: That gets part way ...

6 Answers 6

First

Second

Third

Fourth

2 Comments

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related