SASS @for循环中top属性出现Undefined operation错误求助

• 单位不兼容导致运算无效：calc(400px + 6%)中，px是绝对单位，%是相对单位，二者无法在Sass编译阶段完成运算（CSS运行时浏览器可根据上下文解析，但Sass编译时无法处理这种混合单位运算）。而left属性的calc内全是百分比单位，运算合法，所以能正常编译。
• Sass运算优先级触发报错：Sass会优先执行($i + 1) % 3 * calc(...)的乘法运算，但由于calc内部是无效的混合单位运算，导致Sass无法完成整个表达式的计算，抛出Undefined operation错误。

根据实际需求选择对应方案：

方案1：让浏览器运行时处理混合单位运算 #

将整个乘法逻辑包裹进calc，把运算交给浏览器在渲染时处理（需确保6%有明确的相对基准，比如父元素高度）：

@for $i from 0 through 9 {
  .card-#{$i} {
    left: ($i + 1) % 3 * calc(20% + 6.66% * 2);
    top: calc((($i + 1) % 3) * (400px + 6%));
  }
}

方案2：修正单位使其兼容 #

如果6%是笔误（比如应为6px），直接统一单位即可让Sass正常编译：

@for $i from 0 through 9 {
  .card-#{$i} {
    left: ($i + 1) % 3 * calc(20% + 6.66% * 2);
    top: ($i + 1) % 3 * calc(400px + 6px);
  }
}

内容的提问来源于stack exchange，提问作者Alin-Alexandru Peter