csstools / csstools/postcss-advanced-variables

Not evaluating number when passing variables

Open
#98 0 comments 1 reaction 0 assignees View on GitHub
Dominant language
JavaScript
Stars
144
Forks
33
PR merge metrics
No merged PRs in 30d

Description

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

```scss
@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

```css
.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
}
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.