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);

Sass/Scss 公式的错误结果

Wrong result with Sass/Scss formula

variables

sass

operators