Less does not handle calculations within CSS variables

[jacketwpbb]

To reproduce:

@h: 1px;

:root {
  --a: @h * 10;
}

.a {
  height: @h * 10;
}

Current behavior:

:root {
  --asd-sss: 1px * 10;
}

.a {
  height: 10px;
}

Expected behavior:

:root {
  --asd-sss: 10px;
}

Environment information:

• less version: 4.1.3
• operating system: https://lesscss.org/less-preview

[matthew-dean]

This is as designed, although it probably isn't documented well-enough. Custom property values only do simple variable substitutions.

You have to do:

@h: 1px * 10;

:root {
  --a: @h;
}

.a {
  height: @h * 10;
}