Can't use loop $index in a calc()
drolsen opened this issue · comments
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?
@devinrayolsen hi, show me list plugins and their connection sequence.
"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));
}
}
}
@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.
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.