Variable calculations inside `calc()` not calculated.
See original GitHub issueTest 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:
- Created 5 years ago
- Comments:7 (6 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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 withincalc()
will still perform math on their arguments (unless the inner function is also calc).Meaning, you can hack 2.x behavior with:
But there’s no need, since the calculated result is the same.
@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
the resultant output is
It would seem to me that LESS should handle signage flips as part of the variable insertion.