Sass expressions values precision difference

106 views Asked by At

This is from materialize.css source file _grid.scss

  $i: 1;
  @while $i <= $num-cols {
    $perc: unquote((100 / ($num-cols / $i)) + "%");
    &.m#{$i} {
      width: $perc;
      margin-left: 0;
    }
    $i: $i + 1;
  }

This is part of scss file that creates column grid styles. When I've tried to replace it with (loop is the same, only body changed):

  &.offset-m#{$i} {
    margin-left: 100% / ($num-cols / $i);
  }

The result values were different in precision. (Took the values from couple of result classes).

Original: width: 8.33333%; new: 8.3333333333%;

Original: width: 16.66667%; new: 16.6666666667%;

  1. Why is there a difference between Sass "inline" expression and $perc variable?
  2. Is there any actual difference for browser? Maybe faster rendering? Did materialize.css do it for a reason?
0

There are 0 answers