Cannot perform calculation after declaring css variable

[sebastiandammark]

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/

[dosubot]

Hi @sebastiandammark 👋, I'm here to help you with any bugs, questions, or contributions you have while you wait for a human maintainer.

To achieve the expected behavior, you need to ensure that the calculation is performed before assigning the value to the CSS variable. LESS does not automatically compute expressions within CSS custom properties. Here's how you can modify your code to achieve the desired output:

@defaultFontsizeMultiplier: 16;

@fontSize: {
  size1: 64;
  size2: 40;
  size3: 24;
  text: 16;
  small: 14;
  tiny: 10;
}

/* TYPOGRAPHY VARIABLES */
:root {
  each(@fontSize, {
    @calculatedValue: (@value / @defaultFontsizeMultiplier) * 1rem;
    --fl-fs-@{key}: @calculatedValue;
  });
}

This approach ensures that the value is calculated and assigned correctly to the CSS variable ^[1].

To continue talking to Dosu, mention @dosu.

[AmnaMansha]

The Less compiler doesn’t evaluate arithmetic expressions directly when assigning values to CSS custom properties. To work around this, you can pre-calculate the values using Less's each function and then assign the computed results to the custom properties.
@defaultFontsizeMultiplier: 16;

@fontsize: {
size1: 64;
size2: 40;
size3: 24;
text: 16;
small: 14;
tiny: 10;
}

:root {
each(@fontsize, {
@computedValue: (@value / @defaultFontsizeMultiplier) * 1rem;
--fl-fs-@{key}: @computedValue;
});
}