less.js
less.js copied to clipboard
Cannot perform calculation after declaring css variable
To reproduce:
@defaultFontsizeMultiplier: 16;
@fontSize: {
size1: 64;
size2: 40;
size3: 24;
text: 16;
small: 14;
tiny: 10;
}
/* TYPOGRAPHY VARIABLES */
:root {
each(@fontSize, {
--fl-fs-@{key}: (@value / @defaultFontsizeMultiplier) * 1rem;
});
}
Current behavior:
When trying to calculate the value of the variable the output is looked upon as a string.
Expected behavior:
:root {
--fl-fs-size1: 4rem;
--fl-fs-size2: 2.5rem;
--fl-fs-size3: 1.5rem;
--fl-fs-text: 1rem;
--fl-fs-small: 0.875rem;
--fl-fs-tiny: 0.625rem;
}
Environment information: I'm just testing it here: https://lesscss.org/less-preview/