less.js icon indicating copy to clipboard operation
less.js copied to clipboard

Cannot perform calculation after declaring css variable

Open sebastiandammark opened this issue 6 months ago • 1 comments

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/

sebastiandammark avatar Jul 31 '24 14:07 sebastiandammark