Sass/Scss 公式的错误结果

Question

我的 sass 公式有问题，公式通过了，但没有给出正确的结果。

@for $i from 0 through 99 {
   $j:0;
   @if $i>15 {
     $j:1; 
   }
   @if $i>31 {
     $j:2; 
   }
   @if $i>47 {
     $j:3; 
   }
   @if $i>63 {
     $j:4; 
   }
   @if $i>79 {
     $j:5; 
   }

   $k:$i%16;

   $calc-pos-y:calc(#{$j*20%} + #{#{$i%8*$i%8}px});
}

比如$i=91，一般$i%8*$i%8应该是3*3=9，所以$calc-pos-x: calc(100% +9px)。但是，我得到了calc(100% +1px)。

随着我增加$i，我依次得到：

  calc(100% +0px)
  calc(100% +1px)
  calc(100% +4px)
  calc(100% +1px)

对于$i=88，我得到calc(100% +0px)，这很好。
对于$i=89，我得到calc(100% +1px)，这很好。
对于$i=90，我得到calc(100% +4px)，这很好。

我认为$i=91 的结果是(91*91)%8，所以8281%8=1。

我怎样才能拥有3*3=9？

$calc-pos-y:calc(#{$j*20%} + #{#{$i%8}*#{$i%8} px}); //give an error

Answer 1

这是一个简单的运算符优先级问题，您在公式中忘记了括号。试试这个：

$calc-pos-y: calc(#{$j * 20%} + #{($i % 8) * ($i % 8)}px);