less.js: CSS3 calc() function doesn't work with LESS
I know it’s been reported already but bugs were closed due to insufficient information.
I have the following CSS code:
#id1 {
position: fixed;
left: 0; top: 0;
width: 130px;
}
#id2 {
position: fixed;
right: 0; top: 0;
width: calc(100% - 130px);
}
I wanted to transform it into LESS using 130px as a parameter but calc gets internpreted by LESS and this:
@id1width: 130px
#id1 {
position: fixed;
left: 0; top: 0;
width: @id1width;
}
#id2 {
position: fixed;
right: 0; top: 0;
width: calc(100% - @id1width);
}
makes the last but one line transformed to width: calc(-30%); which is clearly not what’s desired. I tried using width: ~"calc(100% - @id1width)"; but it makes @id1width not interpreted.
I think LESS shouldn’t use things reserved by CSS3 for its internal use…
About this issue
- Original URL
- State: closed
- Created 12 years ago
- Reactions: 19
- Comments: 51 (21 by maintainers)
Commits related to this issue
- Fix less/css3 calc() clash. See https://github.com/less/less.js/issues/974 — committed to TK-IT/web by neic 8 years ago
- calc() fix - fixes #974 — committed to matthew-dean/less.js by matthew-dean 6 years ago
- calc() fix - fixes #974 (partially #1880) — committed to less/less.js by matthew-dean 6 years ago
- [Feature] Namespaced values (#3242) * calc() fix - fixes #974 * Parses and retrieves a namespaced value * Adds a bunch of new tests for aliasing and namespacing * Added more CSS Grid tests * Adde... — committed to less/less.js by matthew-dean 6 years ago
- Added literal quotes for LESS (why is LESS so bad) https://github.com/less/less.js/issues/974#issuecomment-9229470 — committed to bahaistudies/jbs by benaltair 3 years ago
- Fix "Undefined property" warning when calc() is used with CSS var() == Less_Tree_Operation == In Less_Tree_Operation::operate(), we call Dimension::operate() with argument $b (named $other there), w... — committed to wikimedia/less.php by Krinkle a year ago
they were probably closed as duplicates… though I can’t find one about calc… see #146 #122 and #915
workaround:
width: ~"calc(100% - @{id1width})";- note curly brackets around variable.We are moving to a system where only things inside brackets will be evaluated to fix this problem.
height: ~“calc(100% - 50px)”; Worked for me.
In a UIkit 3 theme I am using this in
my_theme.less:And it works.
I was having this issue in 1.6.3 (for some reason, WinLESS is barfing on compile when I upgrade to 1.7.x, so I’m sticking to 1.6.x for now)
My quickfix was just to escape one part of the equation like:
height: calc(~“100%” - unit(@var, px));This even works for variables, like
@var: 50. Or you could escape the whole calculation likecalc(~“100% - 50px”);Why is this issue closed?! It’s not fixed.
I’m still getting
calc(30%)when I writecalc(50% - 20px). This is never what anyone wants. Apart from the fact that it’s wrong to blindly calculate with different units, it should leave it as-is in a calc(), unless it can be calculated with 100% reliability (e.g. same units). I’m using LESS 2.7.3.Please reopen this issue.
how to make height=width
It would not. Just set
--strict-math=on(not enabled by default because of compatibility with a gigantic amount of Less projects depending on--strict-math=off, plus a few considerations mentioned at #1880).Today it still doesn’t work with default installation of less (using npm).
I had to use:
min-height: ~"calc(100% - 262px)"; //calc(100% - 262px);I don’t know if it is normal, as the bug is marked “closed”, but just wanted to let you know.
@twiginteractive If you have to use escaping with
--strict-mathoptionoff(default setting) then it’s not an issue but expected behaviour. See--strict-math.