CODEWITHSUNDEEP
variablessassoperators
Fouvet Sébastien
Fouvet Sébastien

Reputation: 81

Wrong result with Sass/Scss formula

I have a problem with a sass formula, the formula passes, but does not give the right result.

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

For example, when $i=91, normally $i%8*$i%8 should be 3*3=9, so $calc-pos-x: calc(100% +9px). But yet, I get calc(100% +1px).

As I increment $i, I successively obtain:

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

For $i=88 I get calc(100% +0px), it's good.
For $i=89 I get calc(100% +1px), it's good.
For $i=90 I get calc(100% +4px), it's good.

I think for $i=91 the result is (91*91)%8, so 8281%8=1.

How can i have 3*3=9?

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

Upvotes: 1

Views: 95

Answers (1)

Arkellys
Arkellys

Reputation: 7800

It's a simple operator precedence problem, you forgot parenthesis in your formula. Try this:

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

Upvotes: 1

Related Questions