Less.js: Css grid-columns got transpiled to different value
Using less compiler, css grid property grid-columns got transpiled to different value. instead of 2 / -1, output value is -2, so that it displays different way.
Input file:
grid-column: 2 / -1;
Output of less preprocessor:
grid-column: -2;
Expected output:
grid-column: 2 / -1;
Less version 2.7.3.
This css feature is quite new, even I've just learned it recently here https://stackoverflow.com/questions/47319464/make-a-column-span-to-the-end-of-the-grid/47320149#47320149
but looks like transpilation is incorrect.
PS: is possible to temporary fix transpilation somehow ?
jurosh
All 9 comments
Use strict-math.
seven-phases-max
on 16 Nov 2017
Closing in favour of #1880.
seven-phases-max
on 16 Nov 2017
Thanks @seven-phases-max , it did the trick.
..but anyway probably shouldn't that option affect functionality (layout) even when it's turned off ?
jurosh
on 16 Nov 2017
Ah see, it's being solved #1880
jurosh
on 16 Nov 2017
Yes, I went to a learning seminar on CSS Grid recently and saw that here's another place where people using Less will run into this. / were not common in CSS when Less was first written, so it's become more of a problem over time.
matthew-dean
on 17 Nov 2017
@jurosh Note you can also write: grid-column: ~"2 / -1"; but we're hoping to fix this so neither of those things are required.
matthew-dean
on 17 Nov 2017
Hello, I meet this problem too. Please tell me whether there's another new and clean syntax or not besides grid-column: ~"2 / -1"; and strict math mode by now? Thank very much.
arvinxx
on 17 Mar 2018
Please tell me whether there's another new and clean syntax ...
No, there's not.
seven-phases-max
on 17 Mar 2018
@arvinxx Essentially, the problem of division operators needs to be resolved. See #1880. The holdup is basically there hasn't been community consensus on the best way to resolve the conflict. Read through the thread when you have time.
matthew-dean
on 19 Mar 2018
Related issues
Oskariok
·
6Comments
yggi49
·
7Comments
joe223
·
4Comments
papandreou
·
7Comments
seven-phases-max
·
6Comments
Most helpful comment
@jurosh Note you can also write:
grid-column: ~"2 / -1";but we're hoping to fix this so neither of those things are required.