question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Variable calculations inside `calc()` not calculated.

See original GitHub issue

Test Case

@a: 10px;
@b: 10px;

.one {
	width: calc(100% - ((@a + @b)));
}

Expected Output (& Output for v2.7.1)

.one {
  width: calc(100% - 20px);
}

Actual Output (lessc v 3.0.4)

(Command: lessc -sm=on test.less > test.css)

.one {
  width: calc(100% - 10px + 10px);
}

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:7 (6 by maintainers)

github_iconTop GitHub Comments

1reaction
matthew-deancommented, Jun 20, 2018

So, I slightly misunderstood this, but it’s working as expected. Essentially, the calc() bug was recently fixed and no math is performed within calc(). But functions within calc() will still perform math on their arguments (unless the inner function is also calc).

Meaning, you can hack 2.x behavior with:

.one {
	width: calc(100% - (min(@a + @b)));
}

But there’s no need, since the calculated result is the same.

0reactions
mikejf-prcommented, Nov 19, 2018

@matthew-dean I’m troubled by the lack of evaluation even for negative variables, as that’s not really something that can be properly handled at the moment. If we have a simple

@a: -4px;
div {
	margin-right: calc(0px - @a);
}

the resultant output is

div {
  margin-right: calc(0px - -4px);
}

It would seem to me that LESS should handle signage flips as part of the variable insertion.

Read more comments on GitHub >

github_iconTop Results From Across the Web

calc() - CSS: Cascading Style Sheets - MDN Web Docs
The calc() CSS function lets you perform calculations when specifying CSS property values. It can be used with , , , , ,...
Read more >
Sass Variable in CSS calc() function - Stack Overflow
To use $variables inside your calc() of the height property: ... It will calculate all media-breakpoint automatically by given rate ...
Read more >
A Complete Guide to calc() in CSS
CSS has a special calc() function for doing basic math. In this guide, let's cover just about everything there is to know about...
Read more >
How and when to use CSS calc(): Tutorial with examples
The calc() function allows you to perform computations when specifying CSS property values. It's especially useful for calculating length, ...
Read more >
Calculations - Sass
Calculations will also be simplified within other calculations. In particular, if a calc() end up inside any other calculation, the function call will...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found