postcss-advanced-variables icon indicating copy to clipboard operation
postcss-advanced-variables copied to clipboard

Not evaluating number when passing variables

Open amykapernick opened this issue 2 years ago • 0 comments

I have a mixin function that I use to place labels on a range slider, something like this

@mixin range_labels {
	$span: 3;

	@for $i from 1 through 5 {
		$odd: ($i * 2) - 1;
		$start_odd: (($i - 1) * $span);

		&:nth-child(#{$odd}) {
			grid-column: $start_odd  / span $span;
		}
	}
}

But when it compiles out, it's not evaluating the results of the variables, eg. $odd: ($i *2) - 1 which gives invalid CSS when a function is passed into an nth-child selector

.label:nth-child((1 * 2) - 1){
    grid-column:((1 - 1) * 3) / span 3
}
.label:nth-child((2 * 2) - 1){
    grid-column:((2 - 1) * 3) / span 3
}

amykapernick avatar Apr 26 '23 02:04 amykapernick