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.