Division doesn't work properly

ambienthack commented 3 years ago

Problem: division operation is not compiled as expected.

Steps to reproduce:

create empty folder

create project and install less

npm init -y
npm i less --save-dev

output


npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN lessbug@1.0.0 No description
npm WARN lessbug@1.0.0 No repository field.

less@4.1.1 added 20 packages from 54 contributors and audited 20 packages in 4.139s found 0 vulnerabilities
```
3. create style.less
```less
.selector {
@var: 50vh/2;
width: @var;
}
```
1. compile style.less
```
"./node_modules/.bin/lessc.cmd" style.less styles.css
```
2. division operation is not compiled. created style.css is below
```
.selector {
width: 50vh/2;
}
```

Environment: Windows 10, less@4.1.1

In my tests this problem was observed starting from 4.0.0

anuveyatsu commented 3 years ago

Having same issue after upgrading lessc cli tool.

ghost commented 3 years ago

It's because the version 4 of Less set the math option to by default require parentheses for division based operations, and then neglected to mention this obviously breaking change in their change-logs. It's hidden away in the documentation.

http://lesscss.org/usage/#less-options-math

To fix it you need to set the lessc option for math to be always, or manually go through and add parentheses to your division operations.

.selector { width: 50vh/2; }

would become

.selector { width: (50vh/2); }

I sort of understand why they implemented that change, because there is a valid CSS shorthand that uses the division operator. But I think this is something they should have mentioned because it completely breaks entire applications.

ambienthack commented 3 years ago

I can confirm, that the solution suggested by https://github.com/less/less.js/issues/3608#issuecomment-811086683 works for me. So I'm closing the issue.

less / less.js

Division doesn't work properly #3608