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%;
- Why is there a difference between Sass "inline" expression and $perc variable?
- Is there any actual difference for browser? Maybe faster rendering? Did materialize.css do it for a reason?