CODEWITHSUNDEEP
cssless
redeyes
redeyes

Reputation: 61

How to calculate multiple calc() on LESS?

How I can get only result from calc ?

@winh: `$(window).height()`;
@re: calc(~'@{winh}px - 125px');

.lgrid(@width, @height) {
    height: ~"@{re} * 21.25% * @{height}" !important;
}

Result on my file.less

height: calc(675px - 125px) * 21.25% * 4 !important;

I try another way with 

height: calc(~"@{re} * 21.25% * @{height}") !important;

but I have multiple calc

calc(calc(675px - 125px) * 21.25% * 4) !important;

But it's not working on my browser (chrome). How I can calc this ?

Upvotes: 1

Views: 1670

Answers (1)

ScottS
ScottS

Reputation: 72281

If you really want to use the css calc() function as your final calculator, then you would need your LESS code to be something like this:

height: ~"calc(@{re} * calc(21.25% * @{height}))" !important;

Producing css like this:

height: calc(calc(601px - 125px) * calc(21.25% * 4)) !important;

But it probably would be best to do all the calculations in LESS, which is challenging because of bugginess at present, so really it needs to be all in the javascript. Maybe something more like this:

@winh: `$(window).height()`;

.lgrid(@width, @height) {
  @calcHeight: `function(){return (@{winh} - 125) * (.2125 * @{height})}()`;
  height: ~"@{calcHeight}px" !important;
}

This assumes the final result is intended to be pixels.

Upvotes: 2

Related Questions