Can't use loop $index in a calc()

[Devin R. Olsen]

This does not work:

    @for $val from var(--from) to var(--to) {
        .some-class-$val { width: calc(calc(100% / 12) * $val); }
    }

While this does:

    @for $val from var(--from) to var(--to) {
        .some-class-$val { width: calc(calc(100% / 12) * 12); }
    }

Any suggestions?

[Ivan Demidov]

@devinrayolsen hi, show me list plugins and their connection sequence.

[Devin R. Olsen]

    "postcss-color-alpha": "^1.0.3",
    "postcss-cssnext": "^2.8.0",
    "postcss-discard-empty": "^2.1.0",
    "postcss-import": "^8.1.2",
    "postcss-loader": "^0.13.0",
    "postcss-for": "^2.1.1",
    "postcss-at-rules-variables": "0.0.25",
    "lost": "^7.1.1",

webpack, however sorry should of checked back in as I was able to get this to work now. I don't know why it started working but it did..:

@for $var from 1 to 12 {
    .row {
        &.row-$(var) { 
            max-width: calc(calc(calc(var(--rowMaxWidth) / var(--columnCount)) * $var) + var(--gutterWidth));
        }
    }
}

[Ivan Demidov]

@devinrayolsen Very important the order of the plugins calls Use postcss-at-rules-variables before you at-rules plugin. Try to change the order of the connections in your config:

module.exports = {
  plugins: [
    require('postcss-at-rules-variables')({ /* ...options */ }),
    require('postcss-for')({ /* ...options */ })
  ]
}

in my example the order is correct, try to use it.

You can do it manually or use post-sequence but you need to prepare the configuration myself because I don't have time to do post-config and post-load.

Let me know if you have something does not work.

[Devin R. Olsen]

Yeah, I'm positive I have / had the order of plugins correct, I had already ran into that issue prior to making this issue. I'm not sure why it started working all of a sudden :) but we can close this now.