Skip to content

Not evaluating number when passing variables #98

Open
@amykapernick

Description

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
}

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions